iPod

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7function IPod({ className, ...props }: React.ComponentProps<"div">) {
8  return (
9    <div
10      data-slot="ipod"
11      className={cn(
12        "flex w-[290px] shrink-0 flex-col items-center gap-6 rounded-[36px] bg-[linear-gradient(160deg,#ffffff_0%,#eceef2_55%,#d8dbe1_100%)] px-[22px] pb-[30px] pt-6 shadow-[inset_0_2px_0_rgba(255,255,255,0.9),inset_0_-4px_10px_rgba(20,30,50,0.08),0_0_0_1px_rgba(20,30,50,0.12),0_26px_55px_rgba(20,30,50,0.28),0_4px_10px_rgba(20,30,50,0.12)]",
13        className
14      )}
15      {...props}
16    />
17  )
18}
19 
20function IPodScreen({ className, children, ...props }: React.ComponentProps<"div">) {
21  return (
22    <div
23      data-slot="ipod-screen"
24      className={cn(
25        "w-full rounded-[10px] bg-[linear-gradient(180deg,#23262c,#3a3e46)] p-[7px] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6),0_1px_0_rgba(255,255,255,0.8)]",
26        className
27      )}
28      {...props}
29    >
30      <div className="overflow-hidden rounded-[5px] bg-[#f2f6fb] shadow-[inset_0_0_8px_rgba(40,70,120,0.15)]">
31        {children}
32      </div>
33    </div>
34  )
35}
36 
37function IPodHeader({ className, children, ...props }: React.ComponentProps<"div">) {
38  return (
39    <div
40      data-slot="ipod-header"
41      className={cn(
42        "relative flex h-6 items-center justify-center border-b border-[#93a7c2] bg-[linear-gradient(180deg,#fdfefe_0%,#cfdcec_50%,#b6c9e0_100%)] text-[12px] font-bold text-[#2c3e58] [text-shadow:0_1px_0_rgba(255,255,255,0.7)]",
43        className
44      )}
45      {...props}
46    >
47      {children}
48      <span className="absolute right-2 h-[10px] w-5 rounded-[2px] border border-[#6b7f9c] bg-[linear-gradient(180deg,#d9f5c0,#7fce4f)] shadow-[inset_0_1px_0_rgba(255,255,255,0.6)] after:absolute after:right-[-3px] after:top-[2px] after:h-1 after:w-[2px] after:rounded-r-[1px] after:bg-[#6b7f9c] after:content-['']" />
49    </div>
50  )
51}
52 
53const WHEEL_BUTTON =
54  "absolute p-1.5 text-[11px] font-bold tracking-[0.06em] text-[#9aa0aa] outline-none transition-[filter] [text-shadow:0_1px_0_rgba(255,255,255,0.8)] hover:brightness-95 focus-visible:text-[#6b7f9c] active:brightness-90"
55 
56function ClickWheel({
57  className,
58  onMenu,
59  onPrev,
60  onNext,
61  onPlayPause,
62  onSelect,
63  ...props
64}: React.ComponentProps<"div"> & {
65  onMenu?: () => void
66  onPrev?: () => void
67  onNext?: () => void
68  onPlayPause?: () => void
69  onSelect?: () => void
70}) {
71  return (
72    <div
73      data-slot="click-wheel"
74// … truncated