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

Layout Changes

Browse Source
This commit is contained in:
Belen Curcio 2020-10-13 09:41:37 -03:00
parent 0d35e22fda
commit 2ad115af61
2 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Navbar/Navbar.tsx
View File

@ -14,7 +14,7 @@ const Navbar: FC<Props> = ({ className }) => {
return (
<div className={rootClassName}>
<Container>
<div className="flex justify-between align-center flex-row p-4 md:p-6 relative">
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
<div className="flex flex-1 items-center">
<Link href="/">
<a className="cursor-pointer">

110
pages/search.tsx
View File

@ -2,7 +2,7 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import useSearch from '@lib/bigcommerce/products/use-search'
import { Layout } from '@components/core'
import { Grid } from '@components/ui'
import { Container, Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import { useRouter } from 'next/router'
@ -25,60 +25,66 @@ export default function Home({
})
return (
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
<Container>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
))}
</ul>
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-secondary">
<a href="#">{node.name}</a>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
</li>
))}
</ul>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-secondary">
<a href="#">{node.name}</a>
</li>
))}
</ul>
</div>
<div className="col-span-8">
{data ? (
<>
{q && (
<div className="mb-12">
{data.found ? (
<>Showing {data.products.length} results for</>
) : (
<>There are no products that match</>
)}{' '}
"<strong>{q}</strong>"
</div>
)}
<Grid
items={data.products}
layout="normal"
wrapper={ProductCard}
/>
</>
) : (
<div>Searching...</div>
)}
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
</ul>
</div>
</div>
<div className="col-span-8">
{data ? (
<>
{q && (
<div className="mb-12">
{data.found ? (
<>Showing {data.products.length} results for</>
) : (
<>There are no products that match</>
)}{' '}
"<strong>{q}</strong>"
</div>
)}
<Grid items={data.products} layout="normal" wrapper={ProductCard} />
</>
) : (
<div>Searching...</div>
)}
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
</ul>
</div>
</div>
</Container>
)
}