forked from crowetic/commerce
new
This commit is contained in:
parent
a0142a7220
commit
dca97063c9
@ -12,7 +12,7 @@ const Avatar: FunctionComponent<Props> = ({ className }) => {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<img
|
||||
className="inline-block h-12 w-12 rounded-full"
|
||||
className="inline-block h-8 w-8 rounded-full"
|
||||
src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
|
||||
alt=""
|
||||
></img>
|
||||
|
7
components/Footer/Footer.module.css
Normal file
7
components/Footer/Footer.module.css
Normal file
@ -0,0 +1,7 @@
|
||||
.root {
|
||||
@apply border-black border-t;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply flex justify-between items-center flex-row px-4 py-5 border-black border-l border-r;
|
||||
}
|
20
components/Footer/Footer.tsx
Normal file
20
components/Footer/Footer.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import cn from "classnames";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import s from "./Footer.module.css";
|
||||
import { Container } from "ui";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
const Footer: FunctionComponent<Props> = ({ className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return (
|
||||
<footer className={rootClassName}>
|
||||
<Container className={s.container}></Container>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
1
components/Footer/index.ts
Normal file
1
components/Footer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./Footer";
|
@ -1,7 +1,7 @@
|
||||
.root {
|
||||
@apply px-4 py-5;
|
||||
@apply border-black border-b;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply flex justify-between items-center flex-row;
|
||||
@apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20;
|
||||
}
|
||||
|
@ -13,9 +13,13 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<Container className={s.container}>
|
||||
<div className="flex flex-row h-full content-center">
|
||||
<Searchbar />
|
||||
<nav className="flex flex-row items-center px-3">
|
||||
All Clothes Accesories
|
||||
</nav>
|
||||
</div>
|
||||
<Logo />
|
||||
<Searchbar />
|
||||
<nav>All Clothes Accesories</nav>
|
||||
<nav>
|
||||
<Avatar />
|
||||
</nav>
|
||||
|
@ -1,3 +1,3 @@
|
||||
.root {
|
||||
@apply px-4;
|
||||
@apply px-4 border-black border-r h-full flex items-center;
|
||||
}
|
||||
|
@ -12,34 +12,13 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="flex-1 flex justify-between px-2">
|
||||
<div className="flex-1 flex">
|
||||
<form className="w-full flex md:mr-0" action="#">
|
||||
<label htmlFor="search_field" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<div className="relative w-full text-gray-600 focus-within:text-gray-600">
|
||||
<input
|
||||
id="search_field"
|
||||
className="block w-full h-full pr-12 pl-3 py-2 rounded-md bg-gray-200 text-gray-900 placeholder-gray-600 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 mr-3 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,3 +1,4 @@
|
||||
export { default as Avatar } from "./Avatar";
|
||||
export { default as Footer } from "./Footer";
|
||||
export { default as Navbar } from "./Navbar";
|
||||
export { default as Searchbar } from "./Searchbar";
|
||||
export { default as Avatar } from "./Avatar";
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Featurebar, Button, Container } from "ui";
|
||||
import { Navbar } from "components";
|
||||
import { Navbar, Footer } from "components";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -9,9 +9,10 @@ export default function Home() {
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Navbar />
|
||||
<Container className="py-12">
|
||||
<Container className="px-4 py-5 border-black border-l border-r h-screen">
|
||||
<Button>Click Me!</Button>
|
||||
</Container>
|
||||
<Footer></Footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user