"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Badge } from "./badge"; import { Button } from "./button"; import { Checkbox } from "./checkbox"; import { Select } from "./select"; import { Slider } from "./slider"; import { toast } from "./toast"; import { CartIcon, GridIcon, HeartIcon, ListIcon, StarIcon } from "@kineticui/icons"; type P = { id: string; name: string; cat: string; price: number; was?: number; rating: number; colors: string[]; tag?: string }; const products: P[] = [ { id: "1", name: "Aero Runner", cat: "Shoes", price: 129, was: 159, rating: 4.7, colors: ["#C6F432", "#111827", "#f9fafb"], tag: "Sale" }, { id: "2", name: "Drift Hoodie", cat: "Apparel", price: 89, rating: 4.5, colors: ["#7dd3fc", "#1f2937"] }, { id: "3", name: "Trail Pack 24L", cat: "Bags", price: 149, rating: 4.9, colors: ["#fcd34d", "#374151"], tag: "New" }, { id: "4", name: "Pulse Cap", cat: "Apparel", price: 32, rating: 4.2, colors: ["#f9a8d4", "#111827", "#C6F432"] }, { id: "5", name: "Glide Slide", cat: "Shoes", price: 49, rating: 4.1, colors: ["#a78bfa", "#f9fafb"] }, { id: "6", name: "Orbit Tote", cat: "Bags", price: 59, was: 75, rating: 4.6, colors: ["#fb923c", "#111827"], tag: "Sale" }, { id: "7", name: "Tempo Tee", cat: "Apparel", price: 35, rating: 4.4, colors: ["#34d399", "#f9fafb", "#111827"] }, { id: "8", name: "Summit Boot", cat: "Shoes", price: 199, rating: 4.8, colors: ["#78350f", "#111827"], tag: "New" }, ]; const cats = ["Shoes", "Apparel", "Bags"]; /** Product listing: category and price filters, sort, grid/list toggle, quick add with fly-to-cart and wishlist. */ export function ProductListing() { const [sel, setSel] = React.useState([]); const [max, setMax] = React.useState([200]); const [sort, setSort] = React.useState("featured"); const [view, setView] = React.useState<"grid" | "list">("grid"); const [liked, setLiked] = React.useState>(new Set(["3"])); const [cart, setCart] = React.useState(0); const [color, setColor] = React.useState>({}); let list = products.filter((p) => (!sel.length || sel.includes(p.cat)) && p.price <= max[0]!); if (sort === "low") list = [...list].sort((a, b) => a.price - b.price); if (sort === "high") list = [...list].sort((a, b) => b.price - a.price); if (sort === "rating") list = [...list].sort((a, b) => b.rating - a.rating); return (

{list.length} products

Product Listing

Installation