149 lines
3.8 KiB
TypeScript
149 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { useShopifyCart } from '@/hooks/use-shopify-cart';
|
|
import { truncate } from '../lib/utils';
|
|
import { Card, CardContent } from './ui/card';
|
|
import { Button } from './ui/button';
|
|
|
|
interface ProductImage {
|
|
url: string;
|
|
altText?: string;
|
|
}
|
|
|
|
interface ProductPrice {
|
|
amount: string;
|
|
currencyCode: string;
|
|
}
|
|
|
|
interface ProductVariant {
|
|
id: string;
|
|
title: string;
|
|
price: ProductPrice;
|
|
availableForSale: boolean;
|
|
}
|
|
|
|
interface Product {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
handle: string;
|
|
images: {
|
|
edges: Array<{
|
|
node: ProductImage;
|
|
}>;
|
|
};
|
|
priceRange: {
|
|
minVariantPrice: ProductPrice;
|
|
};
|
|
compareAtPriceRange?: {
|
|
minVariantPrice: ProductPrice;
|
|
};
|
|
variants: {
|
|
edges: Array<{
|
|
node: ProductVariant;
|
|
}>;
|
|
};
|
|
}
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
onAddToCart?: (product: Product) => void;
|
|
onClick?: (product: Product) => void;
|
|
}
|
|
|
|
const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart, onClick }) => {
|
|
const { addItem, openCart } = useShopifyCart();
|
|
|
|
const firstImage = product.images.edges[0]?.node;
|
|
const price = product.priceRange.minVariantPrice;
|
|
const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
|
|
const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
|
|
const firstVariant = product.variants.edges[0]?.node;
|
|
const isAvailable = firstVariant?.availableForSale || false;
|
|
|
|
const handleAddToCart = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (!firstVariant || !isAvailable) return;
|
|
|
|
try {
|
|
await addItem(firstVariant.id, 1);
|
|
openCart();
|
|
|
|
if (onAddToCart) {
|
|
onAddToCart(product);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add item to cart:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="!py-0 !gap-0 rounded-xs overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
|
|
{/* Product Image */}
|
|
<div
|
|
className="aspect-square overflow-hidden bg-gray-100 relative cursor-pointer"
|
|
onClick={() => {
|
|
if (onClick) {
|
|
onClick(product);
|
|
}
|
|
}}
|
|
>
|
|
{firstImage ? (
|
|
<img
|
|
src={firstImage.url}
|
|
alt={firstImage.altText || product.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-image-line text-6xl"></i>
|
|
</div>
|
|
)}
|
|
|
|
{/* Discount Badge */}
|
|
{hasDiscount && compareAtPrice && (
|
|
<div className="absolute top-3 left-3 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
|
|
{Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Product Info */}
|
|
<CardContent className="p-6">
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2 font-heading">
|
|
{truncate(product.title, 60)}
|
|
</h3>
|
|
|
|
{/* Price Section */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<span className="text-sm font-bold text-muted-foreground">
|
|
${parseFloat(price.amount).toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* View Details Button */}
|
|
<Button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onClick) {
|
|
onClick(product);
|
|
}
|
|
}}
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
View Details
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ProductCard;
|