crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add manufacturer section

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-06-14 17:31:30 +07:00
parent c5af5b3069
commit 3ac4b140c9
6 changed files with 109 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/manufacturers-grid/index.tsx
View File

@@ -1,11 +1,12 @@
import { GlobeAltIcon, StarIcon } from '@heroicons/react/24/outline';
import { MAKE_FILTER_ID } from 'lib/constants';
import { Metaobject } from 'lib/shopify/types';
import ButtonGroup from './button-group';
import ManufacturerItem from './item';
type ManufacturersGridProps = {
manufacturers: Metaobject[];
variant?: 'engine' | 'transmission' | 'home';
variant?: 'engines' | 'transmissions' | 'home';
};
const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGridProps) => {
@@ -22,7 +23,15 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
{popularManufacturers.map((manufacturer) => (
<div key={manufacturer.id} className="flex flex-col gap-2">
<ManufacturerItem manufacturer={manufacturer} />
{variant === 'home' ? (
<ManufacturerItem manufacturer={manufacturer} />
) : (
<ManufacturerItem
manufacturer={manufacturer}
className={'rounded border border-primary px-2 py-1'}
href={`/search/${variant}?${MAKE_FILTER_ID}=${manufacturer.id}`}
/>
)}
{variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
</div>
))}
@@ -37,7 +46,15 @@ const ManufacturersGrid = ({ manufacturers, variant = 'home' }: ManufacturersGri
.toSorted((a, b) => a.display_name!.localeCompare(b.display_name!))
.map((manufacturer) => (
<div key={manufacturer.id} className="flex flex-col gap-2">
<ManufacturerItem manufacturer={manufacturer} />
{variant === 'home' ? (
<ManufacturerItem manufacturer={manufacturer} />
) : (
<ManufacturerItem
manufacturer={manufacturer}
className={'rounded border border-primary px-2 py-1'}
href={`/search/${variant}?${MAKE_FILTER_ID}=${manufacturer.id}`}
/>
)}
{variant === 'home' && <ButtonGroup manufacturer={manufacturer} />}
</div>
))}

12
components/manufacturers-grid/item.tsx
View File

@@ -1,16 +1,19 @@
import ImageDisplay from 'components/page/image-display';
import { Metaobject } from 'lib/shopify/types';
import Link from 'next/link';
import { Suspense } from 'react';
import { twMerge } from 'tailwind-merge';
const ManufacturerItem = ({
manufacturer,
className
className,
href
}: {
manufacturer: Metaobject;
className?: string;
href?: string;
}) => {
return (
const children = (
<div className={twMerge('flex w-full flex-row items-center justify-between', className)}>
<span className="text-sm leading-5">{manufacturer.display_name}</span>
<div className="hidden md:block">
@@ -25,6 +28,11 @@ const ManufacturerItem = ({
</div>
</div>
);
if (href) {
return <Link href={href}>{children}</Link>;
}
return children;
};
export default ManufacturerItem;