crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-20 08:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes top spacing discrepancies

Browse Source
This commit is contained in:
Michael Novotny 2023-07-24 18:19:03 -05:00
parent 574e7eea9e
commit 1496a3c241
No known key found for this signature in database
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/search/layout.tsx
View File

@ -7,12 +7,12 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col px-4 py-6 text-black dark:text-white md:flex-row"> <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="order-first flex-none md:pr-12 md:pt-6"> <div className="order-first w-full flex-none md:max-w-[125px]">
<Collections /> <Collections />
</div> </div>
<div className="order-last min-h-screen w-full md:order-none">{children}</div> <div className="order-last min-h-screen w-full md:order-none">{children}</div>
<div className="order-none md:order-last md:flex-none md:pl-12 md:pt-6"> <div className="order-none flex-none md:order-last md:w-[125px]">
<FilterList list={sorting} title="Sort by" /> <FilterList list={sorting} title="Sort by" />
</div> </div>
</div> </div>

2
components/grid/index.tsx
View File

@ -2,7 +2,7 @@ import clsx from 'clsx';
function Grid(props: React.ComponentProps<'ul'>) { function Grid(props: React.ComponentProps<'ul'>) {
return ( return (
<ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}> <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
{props.children} {props.children}
</ul> </ul>
); );

4
components/grid/three-items.tsx
View File

@ -8,7 +8,7 @@ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half
<div <div
className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'} className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
> >
<Link className="block h-full p-2" href={`/product/${item.handle}`}> <Link className="block h-full" href={`/product/${item.handle}`}>
<GridTileImage <GridTileImage
src={item.featuredImage.url} src={item.featuredImage.url}
width={size === 'full' ? 1080 : 540} width={size === 'full' ? 1080 : 540}
@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
const [firstProduct, secondProduct, thirdProduct] = homepageItems; const [firstProduct, secondProduct, thirdProduct] = homepageItems;
return ( return (
<section className="mx-auto max-w-screen-2xl p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2"> <section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2">
<ThreeItemGridItem size="full" item={firstProduct} /> <ThreeItemGridItem size="full" item={firstProduct} />
<ThreeItemGridItem size="half" item={secondProduct} /> <ThreeItemGridItem size="half" item={secondProduct} />
<ThreeItemGridItem size="half" item={thirdProduct} /> <ThreeItemGridItem size="half" item={thirdProduct} />

6
components/layout/search/filter/index.tsx
View File

@ -7,18 +7,18 @@ export type PathFilterItem = { title: string; path: string };
function FilterItemList({ list }: { list: ListItem[] }) { function FilterItemList({ list }: { list: ListItem[] }) {
return ( return (
<div className="hidden md:block"> <>
{list.map((item: ListItem, i) => ( {list.map((item: ListItem, i) => (
<FilterItem key={i} item={item} /> <FilterItem key={i} item={item} />
))} ))}
</div> </>
); );
} }
export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) { export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
return ( return (
<> <>
<nav className="col-span-2 w-full flex-none"> <nav>
{title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null} {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
<ul className="hidden md:block"> <ul className="hidden md:block">
<FilterItemList list={list} /> <FilterItemList list={list} />