update
This commit is contained in:
gpatruno
@@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
formatEuro,
|
||||
type CustomWaffleConfig,
|
||||
type IngredientPickerItem,
|
||||
} from "@/lib/custom-waffle";
|
||||
import { isUploadAssetPath } from "@/lib/image-url";
|
||||
import { WaffleMenuImage } from "./WaffleMenuImage";
|
||||
|
||||
function IngredientThumb({ src, alt }: { src: string; alt: string }) {
|
||||
if (src.startsWith("http")) {
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={src} alt={alt} className="h-full w-full object-cover" />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
fill
|
||||
unoptimized={isUploadAssetPath(src)}
|
||||
className="object-cover"
|
||||
sizes="64px"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomWaffleCard({
|
||||
config,
|
||||
ingredients,
|
||||
}: {
|
||||
config: CustomWaffleConfig;
|
||||
ingredients: IngredientPickerItem[];
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
const selectedList = useMemo(
|
||||
() => ingredients.filter((ing) => selected.has(ing.id)),
|
||||
[ingredients, selected]
|
||||
);
|
||||
|
||||
const extrasTotal = useMemo(
|
||||
() => selectedList.reduce((sum, ing) => sum + ing.price, 0),
|
||||
[selectedList]
|
||||
);
|
||||
|
||||
const total = config.basePrice + extrasTotal;
|
||||
|
||||
const close = useCallback(() => setOpen(false), []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") close();
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKey);
|
||||
document.body.style.overflow = prev;
|
||||
};
|
||||
}, [open, close]);
|
||||
|
||||
function toggle(id: string) {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className="overflow-hidden rounded-3xl border border-gaufre/30 bg-white shadow-[0_8px_30px_-8px_rgba(61,43,31,0.12)] ring-1 ring-gaufre/20 transition hover:shadow-[0_12px_40px_-8px_rgba(61,43,31,0.18)]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="flex w-full flex-col text-left"
|
||||
>
|
||||
<div className="relative aspect-[16/10] w-full bg-chocolat/5">
|
||||
<WaffleMenuImage src={config.imageUrl} alt={config.title} />
|
||||
<span className="absolute left-4 top-4 rounded-full bg-gaufre px-3 py-1 text-xs font-bold uppercase tracking-wide text-chocolat shadow-sm">
|
||||
Sur mesure
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="mb-2">
|
||||
<span className="font-semibold text-chocolat">
|
||||
{config.title}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
{config.description}
|
||||
</p>
|
||||
{selectedList.length > 0 ? (
|
||||
<p className="mt-2 text-xs font-medium text-chocolat">
|
||||
{selectedList.map((i) => i.name).join(", ")}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-3 text-sm font-semibold text-gaufre">
|
||||
Cliquez pour composer →
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{open ? (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center"
|
||||
role="presentation"
|
||||
onClick={close}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-chocolat/50 backdrop-blur-[2px]"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="custom-waffle-title"
|
||||
className="relative flex max-h-[min(90vh,720px)] w-full max-w-lg flex-col overflow-hidden rounded-3xl border border-chocolat/10 bg-cream shadow-[0_24px_60px_-12px_rgba(61,43,31,0.35)]"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="border-b border-chocolat/10 bg-white px-5 py-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h4
|
||||
id="custom-waffle-title"
|
||||
className="text-lg font-bold text-chocolat"
|
||||
>
|
||||
{config.title}
|
||||
</h4>
|
||||
<p className="mt-1 text-sm text-muted">
|
||||
Base {formatEuro(config.basePrice)} — ajoutez vos
|
||||
ingrédients
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
className="rounded-full p-2 text-chocolat/70 hover:bg-chocolat/5 hover:text-chocolat"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<span className="text-xl leading-none">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
||||
{ingredients.length === 0 ? (
|
||||
<p className="rounded-2xl border border-dashed border-chocolat/20 p-6 text-center text-sm text-muted">
|
||||
Aucun ingrédient disponible pour le moment.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{ingredients.map((ing) => {
|
||||
const isOn = selected.has(ing.id);
|
||||
return (
|
||||
<li key={ing.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(ing.id)}
|
||||
className={`flex w-full items-center gap-3 rounded-2xl border p-3 text-left transition ${
|
||||
isOn
|
||||
? "border-gaufre bg-gaufre/15 ring-1 ring-gaufre/40"
|
||||
: "border-chocolat/10 bg-white hover:border-chocolat/20"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-xl border bg-chocolat/5 ${
|
||||
isOn
|
||||
? "border-gaufre/50"
|
||||
: "border-chocolat/10"
|
||||
}`}
|
||||
>
|
||||
{ing.imageUrl ? (
|
||||
<IngredientThumb
|
||||
src={ing.imageUrl}
|
||||
alt={ing.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="flex h-full w-full items-center justify-center text-lg text-chocolat/25">
|
||||
—
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block font-medium text-chocolat">
|
||||
{ing.name}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-gaufre">
|
||||
+{formatEuro(ing.price)}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className={`flex size-6 shrink-0 items-center justify-center rounded-full border-2 text-xs font-bold ${
|
||||
isOn
|
||||
? "border-gaufre bg-gaufre text-chocolat"
|
||||
: "border-chocolat/20 text-transparent"
|
||||
}`}
|
||||
aria-hidden
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-chocolat/10 bg-white px-5 py-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-2">
|
||||
<span className="text-sm text-muted">
|
||||
{selectedList.length === 0
|
||||
? "Aucun ingrédient sélectionné"
|
||||
: `${selectedList.length} ingrédient${selectedList.length > 1 ? "s" : ""}`}
|
||||
</span>
|
||||
<span className="text-xl font-bold text-gaufre">
|
||||
{formatEuro(total)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
className="w-full rounded-full bg-gaufre py-3 text-sm font-semibold text-chocolat shadow-md hover:opacity-95"
|
||||
>
|
||||
Valider ma composition
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user