import * as React from "react"; import { Gift, HeartHandshake, Sparkles } from "lucide-react"; import { EmptyStateEcommerceWishlistCurationThree } from "@/registry/empty-state-ecommerce-wishlist-curation-three/empty-state-ecommerce-wishlist-curation-three"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof EmptyStateEcommerceWishlistCurationThree >; const recommendations: ComponentProps["recommendations"] = [ { id: "silk-slip", title: "Aurora Silk Midi Slip", brand: "Luna Atelier", description: "Bias-cut silhouette in jewel-toned silk with adjustable straps.", price: "$248", previousPrice: "$298", badge: "Editors' pick", rating: 4.8, ratingLabel: "Loved by 2k shoppers", imageUrl: "https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=1000&q=80", tags: ["evening", "silk"], sizeOptions: ["XS", "S", "M", "L"], href: "https://usenextbase.com/products/aurora-slip", }, { id: "linen-blazer", title: "Seascape Linen Blazer", brand: "Tide & Tailor", price: "$189", badge: "New", rating: 4.6, ratingLabel: "Sustainable fabric", imageUrl: "https://images.unsplash.com/photo-1514996937319-344454492b37?auto=format&fit=crop&w=1000&q=80", tags: ["work"], sizeOptions: ["XS", "S", "M", "L", "XL"], href: "https://usenextbase.com/products/linen-blazer", }, { id: "statement-heel", title: "Aria Sculpted Heel", brand: "Maison V", description: "Architectural heel with chromed finish and memory foam footbed.", price: "$320", badge: "Back in stock", rating: 4.9, imageUrl: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1000&q=80", tags: ["statement"], }, { id: "cashmere-wrap", title: "Alpine Cashmere Wrap", brand: "Northern Thread", description: "Double-faced cashmere wrap with whipstitched edges and hidden pocket.", price: "$210", previousPrice: "$240", badge: "Trending", rating: 4.7, ratingLabel: "Ships in 24h", imageUrl: "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?auto=format&fit=crop&w=1000&q=80", tags: ["cozy", "gift"], }, ]; const filters: NonNullable = [ { id: "under-200", label: "Under $200", description: "Focus on pieces that curate effortlessly without the splurge.", count: 24, }, { id: "sustainable", label: "Sustainable fabrics", description: "Certified organic fibers, non-toxic dyes, and low-impact production.", count: 18, }, { id: "occasion", label: "Occasion", description: "Wedding guest, weekend, or boardroom palettes at a glance.", }, ]; export function EmptyStateEcommerceWishlistCurationThreeDemo() { const [count, setCount] = React.useState(0); const [personalized, setPersonalized] = React.useState(true); return (

Wishlist empty states reinforce your brand voice and curate momentum.

console.info("Browse categories"), }} secondaryAction={{ label: "Import favorites", icon: HeartHandshake, onClick: () => console.info("Import favorites"), }} importAction={{ label: "Import from orders", onClick: () => console.info("Import orders"), }} personalizationToggle={{ label: "Personalize", helper: "Tailor suggestions to your saved designers and fits.", checked: personalized, onCheckedChange: setPersonalized, }} filters={filters} recommendations={recommendations} alert={{ title: "Back-in-stock alerts", description: "Add three items to enable SMS alerts when your size returns.", actionLabel: "Enable alerts", onAction: () => console.info("Enable alerts"), }} miniCart={{ label: "Mini cart", count, onClick: () => setCount((value) => value + 1), }} />

); } export default EmptyStateEcommerceWishlistCurationThreeDemo;

Simple