Split Flap Demo

1"use client"
2 
3import * as React from "react"
4 
5import { SplitFlap } from "@/registry/loomui/split-flap"
6 
7const BOARD = [
8  { city: "LISBON", gate: "B12", time: "10:42" },
9  { city: "OSAKA", gate: "D04", time: "13:05" },
10  { city: "REYKJAVIK", gate: "A21", time: "16:30" },
11  { city: "MONTREAL", gate: "C09", time: "19:55" },
12]
13 
14export default function SplitFlapDemo() {
15  const [index, setIndex] = React.useState(0)
16 
17  React.useEffect(() => {
18    const timer = window.setInterval(
19      () => setIndex((current) => (current + 1) % BOARD.length),
20      3600
21    )
22    return () => window.clearInterval(timer)
23  }, [])
24 
25  const row = BOARD[index]
26 
27  return (
28    <div className="bg-muted/40 flex flex-col items-center gap-3 rounded-xl border p-6">
29      <SplitFlap value={row.city} padTo={9} className="text-[1.6rem]" />
30      <div className="flex gap-3">
31        <SplitFlap value={row.gate} padTo={3} className="text-base" />
32        <SplitFlap value={row.time} padTo={5} className="text-base" />
33      </div>
34    </div>
35  )
36}