Add React editor project

components/shopify/collection-card.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import Link from 'next/link';
-import { Card, CardContent } from '@/components/ui/card';
-import { Typography } from '@/components/Typography';
+import Image from 'next/image';
 
 interface CollectionImage {
   url: string;
-  altText?: string;
+  altText?: string | null;
 }
 
 interface Collection {
@@ -13,7 +12,7 @@ interface Collection {
   title: string;
   handle: string;
   description?: string;
-  image?: CollectionImage;
+  image?: CollectionImage | null;
 }
 
 interface CollectionCardProps {
@@ -22,47 +21,35 @@ interface CollectionCardProps {
 
 const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
   return (
-    <Link href={`/collections/${collection.handle}`} className="block group">
-      <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
-        {/* Collection Image */}
-        <div className="aspect-video overflow-hidden bg-muted">
-          {collection.image ? (
-            <img
-              src={collection.image.url}
-              alt={collection.image.altText || collection.title}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-            />
-          ) : (
-            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
-              <i className="ri-folder-line text-6xl"></i>
-            </div>
-          )}
-        </div>
-
-        {/* Collection Info */}
-        <CardContent className="p-6">
-          <Typography
-            variant="subtitle1"
-            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
-          >
-            {collection.title}
-          </Typography>
-
-          {collection.description && (
-            <p className="text-muted-foreground">
-              {collection.description.substring(0, 100)}
-              {collection.description.length > 100 ? '...' : ''}
-            </p>
-          )}
-
-          <div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
-            <span>View Collection</span>
-            <i className="ri-arrow-right-s-line ml-2"></i>
+    <Link
+      href={`/collections/${collection.handle}`}
+      className="group block h-full"
+    >
+      {/* Collection Image */}
+      <div className="relative aspect-square overflow-hidden">
+        {collection.image ? (
+          <Image
+            src={collection.image.url}
+            alt={collection.image.altText || collection.title}
+            fill
+            sizes="(min-width: 1024px) 25vw, 50vw"
+            className="object-cover transition-transform duration-500 group-hover:scale-[1.04]"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
+            <i className="ri-folder-line text-8xl"></i>
           </div>
-        </CardContent>
-      </Card>
+        )}
+      </div>
+
+      {/* Collection Info */}
+      <div className="flex flex-col flex-1 py-2.5">
+        <h3 className="text-sm font-medium text-foreground line-clamp-1">
+          {collection.title}
+        </h3>
+      </div>
     </Link>
   );
 };
 
-export default CollectionCard;
+export default CollectionCard;