import * as React from "react"; import { ArrowUpRight, Code2, Copy, Play, Send, SlidersHorizontal, Wand2, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { ExampleGalleryComponentPlaygroundTwo } from "@/registry/example-gallery-component-playground-two/example-gallery-component-playground-two"; import { cn } from "@/lib/utils"; 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 ExampleGalleryComponentPlaygroundTwo >; const platforms: ComponentProps["platforms"] = [ { id: "web", label: "Web", description: "Desktop web previews with responsive breakpoints and keyboard interactions.", }, { id: "mobile", label: "Mobile", description: "Mobile-first layout with sheet-based detail panel and floating CTA.", }, { id: "desktop", label: "Desktop", description: "Large screen preview with sticky detail panel and hover affordances.", }, ]; const states: ComponentProps["states"] = [ { id: "default", label: "Default", description: "Standard visual state with neutral surface and primary CTA.", }, { id: "focus", label: "Focus", description: "Focus ring highlight for keyboard navigation scenarios.", }, { id: "contrast", label: "High Contrast", description: "Accessible palette tuned for AA contrast requirements.", }, ]; const examples: ComponentProps["examples"] = [ { id: "cta-banner", name: "CTA Banner", summary: "Responsive banner with gradient background, stat chips, and duo CTAs.", thumbnail: { src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=900&q=80", alt: "CTA banner preview thumbnail", }, previewSlot: , platformIds: ["web", "desktop"], tags: ["Marketing", "Announcement"], metadata: [ { label: "Conversion uplift", value: "+19%", emphasis: "positive", icon: , }, { label: "Avg. build time", value: "12 mins", emphasis: "muted", }, ], actions: [ { label: "Open Figma file", href: "https://nextbasehq.com/cta/figma", external: true, }, { label: "Copy React snippet", href: "https://nextbasehq.com/cta/snippet", variant: "ghost", external: true, }, ], stateVariants: [ { stateId: "focus", description: "Focus state highlights the secondary CTA with a visible outline.", previewSlot: , metadata: [ { label: "Keyboard coverage", value: "Tab + Shift+Tab", }, { label: "Announcement timer", value: "30s", emphasis: "muted", }, ], }, { stateId: "contrast", description: "High contrast state swaps gradient for a solid surface with AA verified colors.", previewSlot: , metadata: [ { label: "Contrast ratio", value: "4.8:1", emphasis: "positive", }, ], }, ], }, { id: "feedback-form", name: "Feedback Capture", summary: "Multi-field feedback drawer with sentiment pills, screenshot upload, and async submit state.", thumbnail: { src: "https://images.unsplash.com/photo-1517433456452-f9633a875f6f?auto=format&fit=crop&w=900&q=80", alt: "Feedback form thumbnail", }, previewSlot: , platformIds: ["web", "mobile", "desktop"], tags: ["Product", "Insights"], metadata: [ { label: "Completion rate", value: "67%", emphasis: "positive", }, { label: "Submission volume", value: "432 / wk", }, ], actions: [ { label: "View analytics", href: "https://nextbasehq.com/feedback/analytics", external: true, }, { label: "Duplicate template", href: "https://nextbasehq.com/feedback/template", variant: "ghost", external: true, }, ], stateVariants: [ { stateId: "focus", description: "Shows keyboard focus on the sentiment pill while keeping submit reachable.", previewSlot: , metadata: [ { label: "Keyboard steps", value: "6", }, ], }, ], usageNotes: "Trigger via toast, contextual button, or command palette; ideal for gathering targeted feature feedback.", }, { id: "code-viewer", name: "Live Code Viewer", summary: "Side-by-side code viewer with preview, theme switcher, and copy-to-clipboard.", thumbnail: { src: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=900&q=80", alt: "Code viewer thumbnail", }, previewSlot: , platformIds: ["desktop", "web"], tags: ["Docs", "Developers"], metadata: [ { label: "Theme variants", value: "Light / Dark", emphasis: "muted", }, { label: "Copy usage", value: "312 / wk", }, ], actions: [ { label: "Launch sandbox", href: "https://nextbasehq.com/code/sandbox", external: true, }, ], stateVariants: [ { stateId: "contrast", description: "Contrast state swaps syntax colors for WCAG safe palette.", previewSlot: , }, ], }, ]; export function ExampleGalleryComponentPlaygroundTwoDemo() { return (

Interactive playground

Persist selection while exploring platform variants.

Tabs switch platforms instantly, the detail panel updates without losing context, and mobile opens a sheet with pinned actions.

, external: true, }} deepLinkIdPrefix="playground-example" />

); } function CtaPreview({ focus, contrast, }: { focus?: boolean; contrast?: boolean; }) { return (

Launch highlight

Accelerate adoption with real-time customer proof

Layer success metrics, testimonial quotes, and intent-driven CTAs to help reps personalise outreach.

); } function FeedbackPreview({ focus }: { focus?: boolean }) { return ( Share quick feedback Help product teams prioritise the right enhancements.

How satisfied are you?

{["Delighted", "Satisfied", "Neutral", "Unhappy"].map( (option, index) => ( ), )}

Notes

</div>
        <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto]">
          <Input placeholder="Attach screenshot URL" />
          <Button variant="outline" size="sm">
            <Copy className="size-4" />
            Copy URL
          </Button>
        </div>
      </CardContent>
      <div className="flex items-center justify-between border-t border-border/60 bg-muted/30 px-6 py-4">
        <p className="text-xs text-muted-foreground">
          Responses route directly to the component working group.
        </p>
        <Button size="sm">
          <Send className="size-4" />
          Submit
        </Button>
      </div>
    </Card>
  );
}

function CodePreview({ contrast }: { contrast?: boolean }) {
  return (
    <div
      className={cn(
        "flex flex-col gap-4 rounded-xl border border-border/60 bg-background/70 p-4",
        contrast && "bg-[#111827] text-slate-100",
      )}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Badge variant="secondary" className="rounded-full">
            React
          </Badge>
          <span className="text-xs text-muted-foreground">
            component-playground.tsx
          </span>
        </div>
        <Button size="icon" variant="ghost">
          <Code2 className="size-4" />
        </Button>
      </div>
      <pre className="overflow-x-auto rounded-lg bg-muted/40 p-4 text-xs leading-relaxed">
        {`export function Playground() {
  const [state, setState] = useState("default")

return (
    <ComponentGallery
      state={state}
      onStateChange={setState}
    />
  )
}`}
      </pre>
      <Button variant="secondary" size="sm" className="self-end">
        Copy snippet
      </Button>
    </div>
  );
}

export default ExampleGalleryComponentPlaygroundTwoDemo;

</article></body></html>

Simple