Initial commit

editor/components/commerce/collection-card.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Card, CardContent } from '@/editor/components/ui/card';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  image?: CollectionImage;
+}
+
+interface CollectionCardProps {
+  collection: Collection;
+}
+
+const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
+  return (
+    <Link to={`/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-gray-100">
+          {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-gray-400">
+              <i className="ri-folder-line text-6xl"></i>
+            </div>
+          )}
+        </div>
+
+        {/* Collection Info */}
+        <CardContent className="p-6">
+          <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
+            {collection.title}
+          </h3>
+
+          {collection.description && (
+            <p className="text-gray-600">
+              {collection.description.substring(0, 100)}
+              {collection.description.length > 100 ? '...' : ''}
+            </p>
+          )}
+
+          <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
+            <span>View Collection</span>
+            <i className="ri-arrow-right-s-line ml-2"></i>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};
+
+export default CollectionCard;