{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-skeleton-1",
  "description": "Basic skeleton",
  "registryDependencies": [
    "@coss/avatar",
    "@coss/button",
    "@coss/skeleton"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-skeleton-1.tsx",
      "content": "\"use client\";\n\nimport { UserRoundPlusIcon, UsersRoundIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\n\nconst users = [\n  {\n    delay: 3000,\n    fallback: \"SJ\",\n    followers: \"15k\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80\",\n    name: \"Sarah Johnson\",\n    role: \"Design Engineer\",\n  },\n  {\n    delay: 4000,\n    fallback: \"MA\",\n    followers: \"8k\",\n    image:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80\",\n    name: \"Mark Bennett Andersson\",\n    role: \"Product Designer\",\n  },\n  {\n    delay: 3400,\n    fallback: \"AR\",\n    followers: \"12k\",\n    image:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80\",\n    name: \"Alex Rivera\",\n    role: \"UI/UX Designer\",\n  },\n];\n\nfunction UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsLoaded(true);\n    }, delay);\n\n    return () => clearTimeout(timer);\n  }, [delay]);\n\n  if (!isLoaded) {\n    return <UserCardSkeleton />;\n  }\n\n  return (\n    <>\n      <Avatar className=\"size-10\">\n        <AvatarImage alt={user.name} src={user.image} />\n        <AvatarFallback>{user.fallback}</AvatarFallback>\n      </Avatar>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <h4 className=\"line-clamp-1 font-medium text-sm\">{user.name}</h4>\n        <div className=\"flex items-center gap-3 text-muted-foreground text-xs\">\n          <span className=\"truncate\">{user.role}</span>\n          <div className=\"flex min-w-0 items-center gap-1\">\n            <UsersRoundIcon className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">\n              {user.followers}\n              <span className=\"max-sm:hidden\"> followers</span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <Button size=\"xs\">\n        <UserRoundPlusIcon />\n        Follow\n      </Button>\n    </>\n  );\n}\n\nfunction UserCardSkeleton() {\n  return (\n    <>\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"flex flex-1 flex-col\">\n        <Skeleton className=\"my-0.5 h-4 max-w-54\" />\n        <div className=\"flex max-w-54 items-center gap-1\">\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n        </div>\n      </div>\n      <Skeleton className=\"h-7 w-19 sm:h-6 sm:w-17\" />\n    </>\n  );\n}\n\nexport default function Particle() {\n  return (\n    <div className=\"flex w-full max-w-92 flex-col gap-6\">\n      {users.map((user) => (\n        <div className=\"flex items-center gap-4\" key={user.fallback}>\n          <UserCard delay={user.delay} user={user} />\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center"
  },
  "categories": [
    "skeleton"
  ],
  "type": "registry:block"
}