130 lines
3.7 KiB
TypeScript
130 lines
3.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { Layout } from '@/components/Layout';
|
|
import { Card, CardContent } 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;
|
|
content: string;
|
|
price: number;
|
|
sale_price: number | null;
|
|
}
|
|
|
|
export default function ProductDetail() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const [product, setProduct] = useState<Product | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const { addItem, items } = useCart();
|
|
|
|
useEffect(() => {
|
|
if (slug) fetchProduct();
|
|
}, [slug]);
|
|
|
|
const fetchProduct = async () => {
|
|
const { data, error } = await supabase
|
|
.from('products')
|
|
.select('*')
|
|
.eq('slug', slug)
|
|
.eq('is_active', true)
|
|
.maybeSingle();
|
|
|
|
if (error || !data) {
|
|
toast({ title: 'Error', description: 'Product not found', variant: 'destructive' });
|
|
} else {
|
|
setProduct(data);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleAddToCart = () => {
|
|
if (!product) return;
|
|
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 = product ? items.some(item => item.id === product.id) : false;
|
|
|
|
if (loading) {
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Skeleton className="h-10 w-1/2 mb-4" />
|
|
<Skeleton className="h-6 w-1/4 mb-8" />
|
|
<Skeleton className="h-64 w-full" />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (!product) {
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto px-4 py-8 text-center">
|
|
<h1 className="text-2xl font-bold">Product not found</h1>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">{product.title}</h1>
|
|
<Badge className="bg-secondary">{product.type}</Badge>
|
|
</div>
|
|
<div className="text-right">
|
|
{product.sale_price ? (
|
|
<div>
|
|
<span className="text-3xl font-bold">${product.sale_price}</span>
|
|
<span className="text-muted-foreground line-through ml-2">${product.price}</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-3xl font-bold">${product.price}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-lg text-muted-foreground mb-6">{product.description}</p>
|
|
|
|
<Card className="border-2 border-border mb-6">
|
|
<CardContent className="pt-6">
|
|
<div
|
|
className="prose max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: product.content || '<p>No content available</p>' }}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Button
|
|
onClick={handleAddToCart}
|
|
disabled={isInCart}
|
|
size="lg"
|
|
className="shadow-sm"
|
|
>
|
|
{isInCart ? 'Already in Cart' : 'Add to Cart'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|