77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import type { ShopifyCollection } from "@reacteditor/field-shopify";
|
|
import { useCollectionProducts } from "@/editor/hooks/use-shopify-collections";
|
|
import { ProductCard } from "./product-card";
|
|
import { Typography } from "@/editor/theme/Typography";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export type CollectionProps = {
|
|
collection: ShopifyCollection | null;
|
|
showDescription: "yes" | "no";
|
|
};
|
|
|
|
export function CollectionView({
|
|
collection: selected,
|
|
showDescription,
|
|
}: CollectionProps) {
|
|
const handle = selected?.handle ?? "";
|
|
const { collection, loading } = useCollectionProducts(handle, { first: 24 });
|
|
|
|
if (!selected) {
|
|
return (
|
|
<section className="bg-background pb-24 pt-12 md:pt-20">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
<header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
|
|
<Skeleton className="h-3 w-24" />
|
|
<Skeleton className="h-10 w-3/4" />
|
|
{showDescription === "yes" ? (
|
|
<Skeleton className="mt-1 h-5 w-2/3" />
|
|
) : null}
|
|
</header>
|
|
<div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<Skeleton key={i} className="aspect-[4/5] w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const products = (collection?.products as any[] | undefined) ?? [];
|
|
const description = collection?.description ?? selected.description;
|
|
|
|
return (
|
|
<section className="bg-background pb-24 pt-12 md:pt-20">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
<header className="mx-auto mb-14 max-w-2xl text-center">
|
|
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
|
Collection
|
|
</p>
|
|
<Typography variant="h1">
|
|
{collection?.title ?? selected.title}
|
|
</Typography>
|
|
{showDescription === "yes" && description ? (
|
|
<Typography variant="subtitle1" className="mt-4">
|
|
{description}
|
|
</Typography>
|
|
) : null}
|
|
</header>
|
|
|
|
<div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
|
|
{loading
|
|
? Array.from({ length: 8 }).map((_, i) => (
|
|
<Skeleton key={i} className="aspect-[4/5] w-full" />
|
|
))
|
|
: products.map((p: any) => <ProductCard key={p.id} product={p} />)}
|
|
</div>
|
|
|
|
{!loading && products.length === 0 ? (
|
|
<div className="mx-auto mt-12 max-w-md text-center text-sm text-muted-foreground">
|
|
This collection has no products yet.
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|