Ticket Stub Demo

1import { TicketStub } from "@/registry/loomui/ticket-stub"
2 
3export default function TicketStubDemo() {
4  return (
5    <TicketStub
6      className="w-full max-w-lg"
7      split={70}
8      stub={
9        <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center">
10          <div className="text-muted-foreground text-[0.6rem] tracking-[0.2em] uppercase">
11            Seat
12          </div>
13          <div className="text-xl font-semibold sm:text-2xl">14A</div>
14        </div>
15      }
16    >
17      <div className="p-4 sm:p-5">
18        <div className="text-muted-foreground text-[0.6rem] tracking-[0.2em] uppercase">
19          Boarding pass
20        </div>
21        <div className="mt-2 flex items-baseline gap-3">
22          <span className="text-xl font-semibold sm:text-2xl">LIS</span>
23          <span className="text-muted-foreground text-sm">to</span>
24          <span className="text-xl font-semibold sm:text-2xl">KIX</span>
25        </div>
26        <div className="text-muted-foreground mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs">
27          <span>Gate B12</span>
28          <span>Boards 10:42</span>
29        </div>
30      </div>
31    </TicketStub>
32  )
33}