item-demo.tsx
flex lexer-generator invocationCode formats a zero-padded integer
SHA-256e8d7b496d2ba82516825246c020b8b28f17585344215f8187561fdd1ef849ac9
MaleculeH₂(Cm₃Db₂)Md(Bk)
Evidence
1import * as React from "react"
2import Image from "next/image"
3import { IconChevronRight, IconDownload } from "@tabler/icons-react"
4import { PlusIcon, TicketIcon } from "lucide-react"
5
6import {
7 Avatar,
8 AvatarFallback,
9 AvatarImage,
10} from "@/registry/new-york-v4/ui/avatar"
11import { Button } from "@/registry/new-york-v4/ui/button"
12import {
13 Field,
14 FieldContent,
15 FieldDescription,
16 FieldLabel,
17 FieldTitle,
18} from "@/registry/new-york-v4/ui/field"
19import {
20 Item,
⋯5 lines
27:3… ItemMedia,
28 ItemSeparator,
29 ItemTitle,
30} from "@/registry/new-york-v4/ui/item"
31import { Progress } from "@/registry/new-york-v4/ui/progress"
32import { Spinner } from "@/registry/new-york-v4/ui/spinner"
33
34const people = [
35 {
36 username: "shadcn",
37 avatar: "https://github.com/shadcn.png",
38 message: "Just shipped a component that fixes itself",
39 },
40 {
41 username: "pranathip",
42 avatar: "https://github.com/pranathip.png",
43 message: "My code is so clean, it does its own laundry",
44 },
45 {
46 username: "evilrabbit",
47 avatar: "https://github.com/evilrabbit.png",
48 message:
49 "Debugging is like being a detective in a crime movie where you're also the murderer",
50 },
51 {
52 username: "maxleiter",
53 avatar: "https://github.com/maxleiter.png",
54 message:
55 "I don't always test my code, but when I do, I test it in production",
⋯6 lines
68:13… "The Morning Brew",
69 album: "Urban Stories",
70 duration: "4:05",
71 },
72 {
⋯7 lines
122:29… causes scroll lock on mobile devices",
123 description:
124 "The Dialog component prevents scrolling on the background content but doesn't restore scroll position properly on mobile Safari and Chrome, causing layout shifts.",
125 },
126 {
127 number: 1156,
128 date: "January 22, 2024",
129 title: "TypeScript errors with Select component in strict mode",
130 description:
131 "Using the Select component with TypeS …
265:26… outline">
266 <ItemMedia>
267 <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
268 <Avatar>
269 …