Changes

2025-12-18 08:06:31 +00:00
parent cbc0992554
commit bf7a9fad99
11 changed files with 1441 additions and 20 deletions
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { Layout } from '@/components/Layout';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useCart } from '@/contexts/CartContext';
+import { toast } from '@/hooks/use-toast';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Product {
+  id: string;
+  title: string;
+  slug: string;
+  type: string;
+  description: string;
+  price: number;
+  sale_price: number | null;
+  is_active: boolean;
+}
+
+export default function Products() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { addItem, items } = useCart();
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const fetchProducts = async () => {
+    const { data, error } = await supabase
+      .from('products')
+      .select('*')
+      .eq('is_active', true)
+      .order('created_at', { ascending: false });
+
+    if (error) {
+      toast({ title: 'Error', description: 'Failed to load products', variant: 'destructive' });
+    } else {
+      setProducts(data || []);
+    }
+    setLoading(false);
+  };
+
+  const handleAddToCart = (product: Product) => {
+    addItem({
+      id: product.id,
+      title: product.title,
+      price: product.price,
+      sale_price: product.sale_price,
+      type: product.type,
+    });
+    toast({ title: 'Added to cart', description: `${product.title} has been added to your cart` });
+  };
+
+  const isInCart = (productId: string) => items.some(item => item.id === productId);
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'consulting': return 'bg-secondary';
+      case 'webinar': return 'bg-accent';
+      case 'bootcamp': return 'bg-muted';
+      default: return 'bg-secondary';
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2">Products</h1>
+        <p className="text-muted-foreground mb-8">Browse our consulting, webinars, and bootcamps</p>
+
+        {loading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[...Array(6)].map((_, i) => (
+              <Card key={i} className="border-2 border-border">
+                <CardHeader>
+                  <Skeleton className="h-6 w-3/4" />
+                  <Skeleton className="h-4 w-1/4" />
+                </CardHeader>
+                <CardContent>
+                  <Skeleton className="h-20 w-full" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : products.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground">No products available yet.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {products.map((product) => (
+              <Card key={product.id} className="border-2 border-border shadow-sm hover:shadow-md transition-shadow">
+                <CardHeader>
+                  <div className="flex justify-between items-start">
+                    <CardTitle className="text-xl">{product.title}</CardTitle>
+                    <Badge className={getTypeColor(product.type)}>{product.type}</Badge>
+                  </div>
+                  <CardDescription className="line-clamp-2">{product.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-2 mb-4">
+                    {product.sale_price ? (
+                      <>
+                        <span className="text-2xl font-bold">${product.sale_price}</span>
+                        <span className="text-muted-foreground line-through">${product.price}</span>
+                      </>
+                    ) : (
+                      <span className="text-2xl font-bold">${product.price}</span>
+                    )}
+                  </div>
+                  <div className="flex gap-2">
+                    <Link to={`/products/${product.slug}`} className="flex-1">
+                      <Button variant="outline" className="w-full border-2">View Details</Button>
+                    </Link>
+                    <Button 
+                      onClick={() => handleAddToCart(product)} 
+                      disabled={isInCart(product.id)}
+                      className="shadow-xs"
+                    >
+                      {isInCart(product.id) ? 'In Cart' : 'Add'}
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}