Add React editor project

components/shopify/collections.tsx

@@ -3,27 +3,49 @@
 import React from 'react';
 import { useCollections } from '@/hooks/use-shopify-collections';
 import CollectionCard from './collection-card';
+import { Button } from '@/components/ui/button';
 
-const Collections: React.FC = () => {
-  const { collections, loading, error, refetch } = useCollections(20);
+interface CollectionsProps {
+  title?: string;
+  subtitle?: string;
+}
+
+const SectionHeader: React.FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => (
+  <>
+    <h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
+      {title}
+    </h2>
+    {subtitle && (
+      <p className="text-center text-sm font-normal max-w-xl mx-auto text-muted-foreground mt-2.5 mb-16">
+        {subtitle}
+      </p>
+    )}
+  </>
+);
+
+const GRID_CLASSES = 'grid grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12';
+
+const Collections: React.FC<CollectionsProps> = ({
+  title = 'Our Collections',
+  subtitle = 'Discover our carefully crafted worlds',
+}) => {
+  const { collections, loading, error, refetch } = useCollections(12);
 
   if (loading) {
     return (
-      <div className="py-16">
-        <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
-            Our Collections
-          </h2>
+      <div className="py-20 bg-background">
+        <div className="max-w-screen-2xl mx-auto px-8">
+          <SectionHeader title={title} subtitle={subtitle} />
 
-          {/* Loading Skeleton */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-video bg-muted"></div>
-                <div className="p-6">
-                  <div className="h-8 bg-muted rounded mb-4"></div>
-                  <div className="h-4 bg-muted rounded mb-2"></div>
-                  <div className="h-4 bg-muted rounded w-3/4"></div>
+          <div className={GRID_CLASSES}>
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="aspect-square bg-zinc-100"></div>
+                <div className="pt-4">
+                  <div className="h-4 bg-zinc-200 w-3/5"></div>
                 </div>
               </div>
             ))}
@@ -35,20 +57,13 @@ const Collections: React.FC = () => {
 
   if (error) {
     return (
-      <div className="py-16">
-        <div className="container mx-auto px-4">
-          <div className="mx-auto flex max-w-md flex-col items-start gap-3 rounded-lg border border-border bg-foreground/[0.02] p-6">
-            <p className="text-sm font-medium">Could not load collections</p>
-            <p className="font-mono text-xs leading-relaxed text-muted-foreground line-clamp-3">
-              {error}
-            </p>
-            <button
-              onClick={() => refetch()}
-              className="rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-muted"
-            >
-              Retry
-            </button>
-          </div>
+      <div className="py-20 bg-background">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <SectionHeader title={title} subtitle={subtitle} />
+          <p className="text-sm text-muted-foreground mb-6">{error}</p>
+          <Button onClick={refetch} variant="outline">
+            Retry
+          </Button>
         </div>
       </div>
     );
@@ -56,35 +71,23 @@ const Collections: React.FC = () => {
 
   if (collections.length === 0) {
     return (
-      <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-5xl font-bold mb-8 font-heading">
-            Our Collections
-          </h2>
-
-          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-muted-foreground mb-4"></i>
-            <h3 className="text-lg font-semibold text-foreground mb-2">
-              No Collections Found
-            </h3>
-            <p className="text-muted-foreground">
-              Check back later or configure your Shopify store connection.
-            </p>
-          </div>
+      <div className="py-20 bg-background">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <SectionHeader title={title} subtitle={subtitle} />
+          <p className="text-sm text-muted-foreground">
+            Collections will appear here once added to your Shopify store.
+          </p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="py-16">
-      <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
-          Our Collections
-        </h2>
+    <div className="py-20 bg-background">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <SectionHeader title={title} subtitle={subtitle} />
 
-        {/* Collections Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className={GRID_CLASSES}>
           {collections.map((collection) => (
             <CollectionCard key={collection.id} collection={collection} />
           ))}