96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { FolderOpen } from "lucide-react";
|
|
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";
|
|
|
|
export type CollectionProps = {
|
|
collection: ShopifyCollection | null;
|
|
showDescription: "yes" | "no";
|
|
};
|
|
|
|
function CollectionView({
|
|
collection: selected,
|
|
showDescription,
|
|
}: CollectionProps) {
|
|
const handle = selected?.handle ?? "";
|
|
const { collection, loading } = useCollectionProducts(handle, { first: 24 });
|
|
|
|
if (!selected) {
|
|
return (
|
|
<section className="py-20">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
<div className="mx-auto max-w-md rounded-md border border-dashed border-border p-8 text-center text-sm text-muted-foreground">
|
|
Pick a collection to render this page.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// The hook flattens collection.products.edges into a plain Product[].
|
|
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) => (
|
|
<div
|
|
key={i}
|
|
className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted"
|
|
/>
|
|
))
|
|
: 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>
|
|
);
|
|
}
|
|
|
|
export function createCollectionEditor(opts: {
|
|
collectionField: any;
|
|
}): ComponentConfig<CollectionProps> {
|
|
return {
|
|
label: "Collection page",
|
|
icon: <FolderOpen size={16} />,
|
|
category: "commerce",
|
|
defaultProps: { collection: null, showDescription: "no" },
|
|
fields: {
|
|
collection: { label: "Collection", ...opts.collectionField },
|
|
showDescription: {
|
|
label: "Description",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Hide description", value: "no" },
|
|
{ label: "Show description", value: "yes" },
|
|
],
|
|
},
|
|
},
|
|
render: (props) => <CollectionView {...props} />,
|
|
};
|
|
}
|