Elastic Tabs Demo

1"use client"
2 
3import * as React from "react"
4 
5import { ElasticTabs } from "@/registry/loomui/elastic-tabs"
6 
7const ITEMS = [
8  { value: "text", label: "Text" },
9  { value: "backgrounds", label: "Backgrounds" },
10  { value: "interaction", label: "Interaction" },
11  { value: "sections", label: "Sections" },
12]
13 
14const COPY: Record<string, string> = {
15  text: "Headlines that arrive with something to say.",
16  backgrounds: "Surfaces that move without asking to be looked at.",
17  interaction: "Things that answer back when you touch them.",
18  sections: "Whole blocks, not just the pieces they are cut from.",
19}
20 
21export default function ElasticTabsDemo() {
22  const [value, setValue] = React.useState("text")
23 
24  return (
25    <div className="flex flex-col items-center gap-5">
26      <ElasticTabs items={ITEMS} value={value} onValueChange={setValue} />
27      <p className="text-muted-foreground text-sm">{COPY[value]}</p>
28    </div>
29  )
30}