"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Badge } from "./badge"; import { Button } from "./button"; import { toast } from "./toast"; import { BellIcon, CartIcon, HeartIcon, ShareIcon, TrendingDownIcon, XIcon } from "@kineticui/icons"; type W = { id: string; name: string; price: number; was?: number; stock: "in" | "low" | "out"; hue: string; added: string }; const seed: W[] = [ { id: "1", name: "Trail Pack 24L", price: 129, was: 149, stock: "in", hue: "#fcd34d", added: "2 days ago" }, { id: "2", name: "Summit Boot", price: 199, stock: "low", hue: "#fb923c", added: "1 week ago" }, { id: "3", name: "Drift Hoodie", price: 89, stock: "out", hue: "#7dd3fc", added: "2 weeks ago" }, { id: "4", name: "Aero Runner", price: 129, was: 159, stock: "in", hue: "#C6F432", added: "1 month ago" }, ]; /** Wishlist: saved items with price-drop and stock badges, move to cart, back-in-stock alerts, remove with undo, share. */ export function Wishlist() { const [items, setItems] = React.useState(seed); const [alerts, setAlerts] = React.useState>(new Set()); const [cart, setCart] = React.useState([]); const total = items.reduce((a, i) => a + (i.stock !== "out" ? i.price : 0), 0); const savings = items.reduce((a, i) => a + (i.was ? i.was - i.price : 0), 0); const remove = (it: W) => { const idx = items.findIndex((x) => x.id === it.id); setItems((xs) => xs.filter((x) => x.id !== it.id)); toast.info(`Removed ${it.name}`, { action: { label: "Undo", onClick: () => setItems((xs) => { const n = [...xs]; n.splice(idx, 0, it); return n; }) } }); }; return (

Wishlist

{items.length} saved · ${total} available{savings ? · ${savings} in price drops : null}

{items.map((it) => (

{it.stock === "out" ?

Sold out

: null}

{it.name}

${it.price} {it.was ? <>~~${it.was}~~ ${it.was - it.price} off : null} {it.stock === "low" ? Only 2 left : null}

Added {it.added}

{it.stock === "out" ? ( ) : ( )}

))}

{!items.length ? (

Your wishlist is empty Tap the heart on any product to save it here.

) : null}

); }

Wishlist

Installation