crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 14:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

navbar

Browse Source
This commit is contained in:
Belen Curcio 2020-09-29 10:01:57 -03:00
parent 54cf948f56
commit ba43eae569
4 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Navbar/Navbar.tsx
View File

@ -16,7 +16,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
<Logo />
<div className="flex flex-row h-full content-center flex-1">
<Searchbar />
<nav className="flex flex-row items-center px-3">
<nav className="hidden flex-row items-center px-3 lg:flex">
<a className="pr-4">All</a>
<a className="pr-4">Clothes</a>
<a>Accesories</a>

8
pages/index.tsx
View File

@ -9,8 +9,12 @@ export default function Home() {
description="Due to COVID-19, some orders may experience processing and delivery delays."
/>
<Navbar />
<Container className="px-4 py-5 h-screen">
<Button>Click Me!</Button>
<Container className="px-4 py-5 h-screen">
<div className="grid grid-cols-1 gap-6 h-full lg:grid-cols-3 lg:grid-rows-2">
<div className="lg:row-span-2 lg:col-span-2 bg-indigo-700 h-full"></div>
<div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>
<div className="lg:row-span-1 lg:col-span-1 bg-red-500"></div>
</div>
</Container>
<Footer></Footer>
</>

10
ui/Featurebar/Featurebar.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply py-4 bg-black text-white flex justify-center;
@apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center;
}
.title {
@ -7,7 +7,13 @@
}
.separator {
@apply mx-2 font-medium text-xs leading-6;
@apply mx-3 bg-white;
width: 1px;
height: 20px;
}
.separator:before {
content: "";
}
.description {

2
ui/Featurebar/Featurebar.tsx
View File

@ -17,7 +17,7 @@ const Featurebar: FunctionComponent<Props> = ({
return (
<div className={rootClassName}>
<span className={s.title}>{title}</span>
<span className={s.separator}>|</span>
<span className={s.separator} />
<span className={s.description}>{description}</span>
</div>
);