{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-md-01",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/audio-player.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/avatar.json",
    "https://wigggle-ui.vercel.app/r/button.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/media/md/media-01.tsx",
      "content": "import {\r\n  CastIcon,\r\n  HeartIcon,\r\n  ShuffleIcon,\r\n  SkipBackIcon,\r\n  SkipForwardIcon,\r\n} from \"lucide-react\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetFooter,\r\n  WidgetHeader,\r\n} from \"@/registry/default/ui/widget\";\r\nimport {\r\n  AudioPlayerButton,\r\n  AudioPlayerDuration,\r\n  AudioPlayerProgress,\r\n  AudioPlayerProvider,\r\n  AudioPlayerTime,\r\n  exampleTrack,\r\n} from \"@/components/ui/audio-player\";\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@/registry/default/ui/avatar\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\nimport { Button } from \"@/registry/default/ui/button\";\r\n\r\nexport default function WidgetDemo() {\r\n  return (\r\n    <AudioPlayerProvider>\r\n      <Widget className=\"justify-between\" size=\"md\">\r\n        <WidgetHeader className=\"items-center justify-between\">\r\n          <div className=\"flex items-center justify-center gap-x-3\">\r\n            <Avatar className=\"size-12 rounded-md\">\r\n              <AvatarImage\r\n                src=\"https://i.scdn.co/image/ab67616d0000b273dfd5b5d99cf81f1864deef01\"\r\n                alt=\"Code Monkey\"\r\n              />\r\n              <AvatarFallback>NU</AvatarFallback>\r\n            </Avatar>\r\n            <div>\r\n              <Label className=\"text-base\">{exampleTrack.data.title}</Label>\r\n              <Label className=\"text-muted-foreground text-sm\">\r\n                {exampleTrack.data.artist}\r\n              </Label>\r\n            </div>\r\n          </div>\r\n          <Button variant=\"ghost\" size=\"icon-sm\">\r\n            <HeartIcon className=\"stroke-muted-foreground size-5\" />\r\n          </Button>\r\n        </WidgetHeader>\r\n        <WidgetFooter className=\"flex w-full flex-col gap-3\">\r\n          <div className=\"flex w-full flex-col gap-1.5\">\r\n            <AudioPlayerProgress className=\"h-full max-h-2 w-full flex-1\" />\r\n            <div className=\"flex w-full items-center justify-between\">\r\n              <AudioPlayerTime className=\"text-muted-foreground text-xs\" />\r\n              <AudioPlayerDuration className=\"text-muted-foreground text-xs\" />\r\n            </div>\r\n          </div>\r\n          <div className=\"mx-auto flex w-max items-center justify-between gap-8\">\r\n            <Button variant=\"ghost\" size=\"icon-sm\">\r\n              <ShuffleIcon className=\"stroke-muted-foreground size-5\" />\r\n            </Button>\r\n            <Button variant=\"ghost\" size=\"icon-sm\">\r\n              <SkipBackIcon className=\"stroke-muted-foreground size-5\" />\r\n            </Button>\r\n            <AudioPlayerButton size=\"icon-sm\" item={exampleTrack} />\r\n            <Button variant=\"ghost\" size=\"icon-sm\">\r\n              <SkipForwardIcon className=\"stroke-muted-foreground size-5\" />\r\n            </Button>\r\n            <Button variant=\"ghost\" size=\"icon-sm\">\r\n              <CastIcon className=\"stroke-muted-foreground size-5\" />\r\n            </Button>\r\n          </div>\r\n        </WidgetFooter>\r\n      </Widget>\r\n    </AudioPlayerProvider>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "media"
    ],
    "size": "md",
    "credits": [
      {
        "name": "@elevenlabs-ui",
        "homepage": "https://ui.elevenlabs.io/docs/components/audio-player",
        "url": "https://ui.elevenlabs.io",
        "logo": "<svg xmlns='http://www.w3.org/2000/svg' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><title>ElevenLabs</title><path d='M4.6035 0v24h4.9317V0zm9.8613 0v24h4.9317V0z'></path></svg>"
      }
    ]
  }
}