{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scene-01",
  "title": "Dashboard preview",
  "description": "A layered app dashboard with a floating notification.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "card",
    "badge",
    "button",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/illustrations/scene/scene-01.tsx",
      "content": "'use client'\n\nimport { Activity, Bell, LayoutGrid, Settings, Users } from 'lucide-react'\nimport { motion, useReducedMotion } from 'motion/react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\nconst nav = [\n  { icon: LayoutGrid, active: true },\n  { icon: Activity, active: false },\n  { icon: Users, active: false },\n  { icon: Settings, active: false },\n]\n\nconst stats = [\n  { label: 'Revenue', value: '$48.2k', trend: '+12%' },\n  { label: 'Users', value: '2,318', trend: '+4%' },\n  { label: 'Churn', value: '1.4%', trend: '-2%' },\n]\n\nexport function Scene01() {\n  const reduce = useReducedMotion()\n\n  return (\n    <motion.div\n      className=\"relative w-full max-w-xl\"\n      initial={reduce ? false : { opacity: 0, filter: 'blur(6px)' }}\n      animate={{ opacity: 1, filter: 'blur(0px)' }}\n      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\n    >\n      <Card className=\"bg-card w-full gap-0 overflow-hidden p-0 shadow-sm\">\n        <div className=\"flex items-center gap-2 border-b px-3 py-2\">\n          <div className=\"flex shrink-0 gap-1.5\">\n            <span className=\"size-2.5 rounded-full bg-red-400/70\" />\n            <span className=\"size-2.5 rounded-full bg-amber-400/70\" />\n            <span className=\"size-2.5 rounded-full bg-emerald-400/70\" />\n          </div>\n          <div className=\"bg-muted mx-auto h-4 w-full max-w-36 min-w-0 rounded-md\" />\n          <Avatar className=\"size-5 shrink-0\">\n            <AvatarImage\n              src=\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&q=80\"\n              alt=\"\"\n            />\n            <AvatarFallback className=\"text-[9px]\">JD</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <div className=\"flex\">\n          <div className=\"flex w-11 shrink-0 flex-col items-center gap-2.5 border-r py-3 sm:w-12\">\n            <div className=\"bg-primary/80 size-5 rounded-lg\" />\n            {nav.map(({ icon: Icon, active }, i) => (\n              <div\n                key={i}\n                className={`flex size-7 items-center justify-center rounded-lg ${\n                  active ? 'bg-muted text-foreground' : 'text-muted-foreground'\n                }`}\n              >\n                <Icon className=\"size-3.5\" />\n              </div>\n            ))}\n          </div>\n\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2.5 p-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 flex-col gap-0.5\">\n                <span className=\"truncate text-sm font-semibold tracking-tight\">\n                  Overview\n                </span>\n                <span className=\"text-muted-foreground truncate text-[10px]\">\n                  Last 30 days\n                </span>\n              </div>\n              <Button size=\"xs\" variant=\"outline\" className=\"shrink-0\">\n                Export\n              </Button>\n            </div>\n\n            <div className=\"grid grid-cols-3 gap-2\">\n              {stats.map((s) => (\n                <div key={s.label} className=\"min-w-0 rounded-lg border p-2\">\n                  <span className=\"text-muted-foreground block truncate text-[9px]\">\n                    {s.label}\n                  </span>\n                  <div className=\"mt-0.5 flex flex-wrap items-baseline justify-between gap-x-1\">\n                    <span className=\"text-xs font-semibold tabular-nums sm:text-[13px]\">\n                      {s.value}\n                    </span>\n                    <span className=\"text-[9px] font-medium text-emerald-600 dark:text-emerald-400\">\n                      {s.trend}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"rounded-lg border p-2.5\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <div className=\"bg-foreground/10 h-1.5 w-14 max-w-full rounded-full\" />\n                <div className=\"flex shrink-0 gap-1\">\n                  <span className=\"bg-primary/70 size-1.5 rounded-full\" />\n                  <span className=\"bg-muted-foreground/30 size-1.5 rounded-full\" />\n                </div>\n              </div>\n              <svg\n                viewBox=\"0 0 320 44\"\n                className=\"mt-1.5 h-10 w-full\"\n                preserveAspectRatio=\"none\"\n                aria-hidden\n              >\n                <defs>\n                  <linearGradient id=\"scene-01-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"0%\"\n                      className=\"text-primary\"\n                      stopColor=\"currentColor\"\n                      stopOpacity=\"0.24\"\n                    />\n                    <stop\n                      offset=\"100%\"\n                      className=\"text-primary\"\n                      stopColor=\"currentColor\"\n                      stopOpacity=\"0\"\n                    />\n                  </linearGradient>\n                </defs>\n                <path\n                  d=\"M0 33 C 34 30, 52 14, 84 18 S 150 7, 184 21 S 250 4, 288 12 S 312 10, 320 9 L 320 44 L 0 44 Z\"\n                  fill=\"url(#scene-01-fill)\"\n                />\n                <path\n                  d=\"M0 33 C 34 30, 52 14, 84 18 S 150 7, 184 21 S 250 4, 288 12 S 312 10, 320 9\"\n                  className=\"text-primary stroke-current\"\n                  strokeWidth=\"2\"\n                  fill=\"none\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </Card>\n\n      <div className=\"absolute right-1 bottom-1 max-w-[calc(100%-0.5rem)] sm:-right-2 sm:-bottom-3\">\n        <Card className=\"flex-row items-center gap-2 p-2 shadow-md sm:gap-2.5 sm:p-2.5\">\n          <div className=\"bg-primary/15 text-primary relative flex size-8 shrink-0 items-center justify-center rounded-lg\">\n            <Bell className=\"size-4\" />\n            <span className=\"border-card absolute -top-0.5 -right-0.5 size-2 rounded-full border-2 bg-emerald-500\" />\n          </div>\n          <div className=\"flex min-w-0 flex-col\">\n            <span className=\"truncate text-xs leading-tight font-medium\">\n              New signup\n            </span>\n            <span className=\"text-muted-foreground truncate text-[10px] leading-tight\">\n              Acme Inc. joined your plan\n            </span>\n          </div>\n          <Badge variant=\"secondary\" className=\"ml-1 shrink-0 text-[10px]\">\n            Live\n          </Badge>\n        </Card>\n      </div>\n    </motion.div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/illustrations/scene/scene-01.tsx"
    }
  ],
  "type": "registry:block"
}