import React from "react"; import { Head, Link } from "@inertiajs/react"; import { Button } from "@/components/ui/button"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/_carousel" import { AspectRatio } from "@/components/ui/aspect-ratio"; import { Badge } from "@/components/ui/badge"; import VariantPicker from "@/components/variant-picker"; import { useTranslation } from "react-i18next"; import { Breadcrumbs } from "@/components/breadcrumbs"; import { CartLine, ShoppingCart, shoppingCart } from "@/components/shopping-cart/shopping-cart-store"; import { SetRequired, SetRequiredDeep } from "type-fest"; import { Resource } from "@/types/global"; type ProductShowProps = { product_resource: Resource> } export default function ProductShow({ product_resource }: ProductShowProps) { const { t } = useTranslation(); const product = product_resource.data; const [selectedOption, setSelectedOption] = React.useState | null>(null); const [quantity, setQuantity] = React.useState(1); const local_shoppingCart = new ShoppingCart( !selectedOption ? [] : [new CartLine(product, selectedOption, quantity)] ); // console.log(toJS(shoppingCart.items)); return (
{t("products")} {product.category.super_category.name} {product.category.name} {product.name}

{product.name}

{product.images.length === 0 ? "" : {product.images.map((image, key) => ( product image ))} }
{product.tags.map(tag => {tag.name} )}
{product.description && (

{product.description}

)} []} selectedOption={selectedOption} onOptionChange={setSelectedOption} quantity={quantity} onQuantityChange={setQuantity} label={t("option_picker.choose_an_option")} no_options_available_label={t("option_picker.no_options_available")} />
{/* WARNING: COMMENTED OUT BECAUSE OF BUG */}
); }