{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-library",
  "type": "registry:component",
  "title": "Media library",
  "description": "A Tailwind media library panel with an upload action and a two column grid of assets showing file name, size and a type badge for image, video, vector or doc.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json"
  ],
  "files": [
    {
      "path": "registry/blocks/media-library.tsx",
      "type": "registry:ui",
      "target": "components/ui/media-library.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst ASSETS = [\n  { name: \"hero-pitch.png\", type: \"image\", size: \"240 KB\" },\n  { name: \"os-mock.mp4\", type: \"video\", size: \"1.2 MB\" },\n  { name: \"logo-mark.svg\", type: \"vector\", size: \"4 KB\" },\n  { name: \"audit-sheet.pdf\", type: \"doc\", size: \"88 KB\" },\n]\n\nfunction MediaLibrary() {\n  return (\n    <div data-slot=\"media-library\" className=\"space-y-4 rounded-2xl border border-border bg-surface p-6 shadow-highlight\">\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <h3 className=\"text-lg font-medium tracking-[-0.014em] text-fg\">Media library</h3>\n          <p className=\"text-sm text-fg-muted\">Assets used across marketing kits and docs.</p>\n        </div>\n        <Button size=\"sm\">Upload</Button>\n      </div>\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        {ASSETS.map((a) => (\n          <div key={a.name} className=\"flex items-center justify-between rounded-xl border border-border bg-bg px-3 py-3\">\n            <div>\n              <p className=\"text-sm font-medium text-fg\">{a.name}</p>\n              <p className=\"font-mono text-xs text-fg-muted\">{a.size}</p>\n            </div>\n            <Badge variant=\"outline\">{a.type}</Badge>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { MediaLibrary }\n"
    }
  ]
}