import * as React from "react"; import { ErrorPageEcommerceDiscoveryThree } from "@/registry/error-page-ecommerce-discovery-three/error-page-ecommerce-discovery-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 ErrorPageEcommerceDiscoveryThree >; type EcommerceCategoryCard = ComponentProps["categories"][number]; type EcommerceSearchSuggestion = NonNullable< ComponentProps["suggestions"] >[number]; export function ErrorPageEcommerceDiscoveryThreeDemo() { const [searches, setSearches] = React.useState([]); const [lastSuggestion, setLastSuggestion] = React.useState( null, ); const categoryCards: EcommerceCategoryCard[] = [ { id: "mindful-home", title: "Mindful home essentials", description: "Zero-waste cleaners, refill pods, and compostable kitchen staples.", href: "/collections/mindful-home", imageSrc: "/images/marketing/feedback.png", imageAlt: "Eco-friendly cleaning supplies arranged on a table", productsCount: 36, priceRange: "$18–$129", badge: "Staff pick", }, { id: "athleisure", title: "Athleisure reset", description: "Breathable fabrics, adaptive fits, and recycled fibers for daily movement.", href: "/collections/athleisure", imageSrc: "/images/marketing/play.png", imageAlt: "Athletic wear displayed on mannequins", productsCount: 52, priceRange: "$24–$168", }, { id: "slow-coffee", title: "Slow coffee ritual", description: "Pour-over gear, ethically sourced beans, and countertop art pieces.", href: "/collections/slow-coffee", imageSrc: "/images/marketing/notifications.png", imageAlt: "Pour-over coffee setup on a wooden counter", productsCount: 18, priceRange: "$16–$210", badge: "Trending", }, ]; const suggestions: EcommerceSearchSuggestion[] = [ { id: "suggestion-1", label: "Ceramic mugs", href: "/search?q=ceramic+mugs", description: "Hand-thrown cups from small batch studios", }, { id: "suggestion-2", label: "Home office", href: "/search?q=home+office", description: "Modular desks and ergonomic add-ons", }, { id: "suggestion-3", label: "Minimalist lighting", href: "/search?q=minimalist+lighting", description: "Sculptural lamps for quiet corners", }, ]; return (

setSearches((prev) => [ ...prev.slice(-4), `${new Date().toLocaleTimeString()} · ${query}`, ]) } onSuggestionSelect={(suggestion) => setLastSuggestion(suggestion.label)} />

Recent search terms

{searches.length === 0 ? (

No searches yet. Try the search above.

) : (

{entry}

)}

Last suggestion tapped

{lastSuggestion ?? "None yet"}

Demo state

Search submissions tracked: {searches.length}

Last suggestion: {lastSuggestion ?? "None recorded"}

); } ErrorPageEcommerceDiscoveryThreeDemo.displayName = "ErrorPageEcommerceDiscoveryThreeDemo"; export default ErrorPageEcommerceDiscoveryThreeDemo;

Simple