Update to use react-editor <App /> component

editor/components/commerce/collection.editor.tsx

@@ -1,75 +1,6 @@
 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>
-  );
-}
+import { CollectionView, type CollectionProps } from "@/editor/components/commerce/collection";
 
 export function createCollectionEditor(opts: {
   collectionField: any;