Update default shopify site design

components/shopify/product-recommendations.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import { useProductRecommendations } from '@/hooks/use-shopify-products';
+import ProductCard from './product-card';
+
+interface ProductRecommendationsProps {
+  productId: string;
+}
+
+const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ productId }) => {
+  const { recommendations, loading, error } = useProductRecommendations(productId);
+
+  // Don't show section if we're not loading and have no recommendations
+  if (!loading && (!recommendations || recommendations.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
+          You Might Also Like
+        </h2>
+
+        {loading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
+                <div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <div className="text-center py-8">
+            <p className="text-gray-500">Recommendations could not be loaded</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {recommendations.slice(0, 3).map((recommendedProduct) => (
+              <ProductCard
+                key={recommendedProduct.id}
+                product={recommendedProduct}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductRecommendations;