Skeleton

import { Skeleton } from "@araf-ds/core"

function UserCard({ loading, user }) {
  if (loading) {
    return (
      <div className="p-4 space-y-3">
        <div className="flex items-center gap-3">
          <Skeleton variant="circular" width={40} height={40} />
          <div className="flex-1 space-y-1">
            <Skeleton variant="text" lines={1} width="50%" />
            <Skeleton variant="text" lines={1} width="35%" />
          </div>
        </div>
        <Skeleton variant="text" lines={2} />
      </div>
    )
  }
  return <UserCardContent user={user} />
}

<Skeleton variant="text" lines={3} />

<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="circular" width={48} height={48} />
<Skeleton variant="circular" width={64} height={64} />

<div className="flex items-center gap-4">
  <Skeleton variant="circular" width={48} height={48} />
  <div className="flex-1 space-y-2">
    <Skeleton variant="text" lines={1} width="60%" />
    <Skeleton variant="text" lines={1} width="40%" />
  </div>
</div>

<Skeleton variant="rectangular" height={200} />

{Array.from({ length: 5 }).map((_, i) => (
  <div key={i} className="flex gap-4 py-3">
    <Skeleton width={32} height={32} variant="circular" />
    <Skeleton variant="text" lines={1} width="30%" />
    <Skeleton variant="rounded" width={60} height={22} />
  </div>
))}