cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests 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 ( return (
<div className={rootClassName}> <div className={rootClassName}>
<Container> <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"> <div className="flex flex-1 items-center">
<Link href="/"> <Link href="/">
<a className="cursor-pointer"> <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 getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import useSearch from '@lib/bigcommerce/products/use-search' import useSearch from '@lib/bigcommerce/products/use-search'
import { Layout } from '@components/core' import { Layout } from '@components/core'
import { Grid } from '@components/ui' import { Container, Grid } from '@components/ui'
import { ProductCard } from '@components/product' import { ProductCard } from '@components/product'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
@ -25,60 +25,66 @@ export default function Home({
}) })
return ( return (
<div className="grid grid-cols-12 gap-8 mt-3 mb-20"> <Container>
<div className="col-span-2"> <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<ul className="mb-10"> <div className="col-span-2">
<li className="py-1 text-primary font-bold tracking-wide"> <ul className="mb-10">
All Categories <li className="py-1 text-primary font-bold tracking-wide">
</li> All Categories
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li> </li>
))} {categories.map((cat) => (
</ul> <li key={cat.path} className="py-1 text-secondary">
<ul> <a href="#">{cat.name}</a>
<li className="py-1 text-primary font-bold tracking-wide"> </li>
All Designers ))}
</li> </ul>
{brands.flatMap(({ node }) => ( <ul>
<li key={node.path} className="py-1 text-secondary"> <li className="py-1 text-primary font-bold tracking-wide">
<a href="#">{node.name}</a> All Designers
</li> </li>
))} {brands.flatMap(({ node }) => (
</ul> <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>
<div className="col-span-8"> </Container>
{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>
) )
} }