Skeleton

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton shape="circle" className="h-12 w-12" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonCard() {
  return (
    <div className="flex flex-col space-y-3">
      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonList() {
  return (
    <div className="space-y-4">
      {[...Array(5)].map((_, index) => (
        <div key={index} className="flex items-center space-x-4">
          <Skeleton shape="circle" className="h-10 w-10" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-3 w-3/4" />
          </div>
        </div>
      ))}
    </div>
  )
}

import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonShapes() {
  return (
    <div className="space-y-6">
      <div>
        <h4 className="mb-3 text-sm font-medium">Rounded</h4>
        <div className="space-y-2">
          <Skeleton shape="rounded" className="h-4 w-[300px]" />
          <Skeleton shape="rounded" className="h-4 w-[250px]" />
          <Skeleton shape="rounded" className="h-4 w-[200px]" />
        </div>
      </div>

      <div>
        <h4 className="mb-3 text-sm font-medium">Square</h4>
        <div className="space-y-2">
          <Skeleton shape="square" className="h-4 w-[300px]" />
          <Skeleton shape="square" className="h-4 w-[250px]" />
          <Skeleton shape="square" className="h-4 w-[200px]" />
        </div>
      </div>

      <div>
        <h4 className="mb-3 text-sm font-medium">Circle</h4>
        <div className="flex space-x-2">
          <Skeleton shape="circle" className="h-12 w-12" />
          <Skeleton shape="circle" className="h-10 w-10" />
          <Skeleton shape="circle" className="h-8 w-8" />
        </div>
      </div>

      <div>
        <h4 className="mb-3 text-sm font-medium">No Animation</h4>
        <div className="space-y-2">
          <Skeleton variant="none" className="h-4 w-[300px]" />
          <Skeleton variant="none" className="h-4 w-[250px]" />
          <Skeleton variant="none" className="h-4 w-[200px]" />
        </div>
      </div>
    </div>
  )
}