Skeleton

import { BrutalSkeleton, BrutalSkeletonText, BrutalSkeletonCard } from '@brutal-ui/react';

<BrutalSkeleton width='100%' height='3rem' />
<BrutalSkeleton width='75%' height='2rem' />
<BrutalSkeleton width='50%' height='2rem' />
<BrutalSkeleton width='8rem' height='8rem' radius='50%' />

<Card variant='elevated'>
  <CardHeader>
    <div className='flex items-center gap-4'>
      <Skeleton className='h-16 w-16 rounded-full' />
      <div className='flex-1 space-y-2'>
        <Skeleton className='h-6 w-1/3' />
        <Skeleton className='h-4 w-1/2' />
      </div>
    </div>
  </CardHeader>
  <CardContent>
    <div className='space-y-3'>
      <Skeleton className='h-4 w-full' />
      <Skeleton className='h-4 w-full' />
      <Skeleton className='h-4 w-2/3' />
    </div>
  </CardContent>
</Card>

{[1, 2, 3].map((i) => (
  <div key={i} className='flex items-center gap-4 p-4 border-4 border-black'>
    <BrutalSkeleton width='3rem' height='3rem' radius='0.5rem' />
    <div className='flex-1 space-y-2'>
      <BrutalSkeleton width='25%' height='1.25rem' />
      <BrutalSkeleton width='50%' height='1rem' />
    </div>
  </div>
))}