Skeleton

import { Skeleton } from "@openlite/ui"
 
export function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

import { Skeleton } from "@openlite/ui"
 
export function SkeletonButtonDemo() {
  return (
    <Skeleton className="h-10 w-28" rounded="lg" />
  )
}

import { Skeleton } from "@openlite/ui"
 
export function SkeletonCardDemo() {
  return (
    <div className="flex flex-col gap-3 max-w-sm">
      <Skeleton className="w-full h-52" rounded="lg" />
      <div className="space-y-2 p-2">
        <Skeleton className="h-4 w-[150px]" />
        <Skeleton className="h-2 w-full" />
        <Skeleton className="h-2 w-full" />
        <Skeleton className="h-2 w-full" />
        <Skeleton className="h-2 w-full" />
        <Skeleton className="h-4 w-[100px]" />
        <div className='grid grid-cols-2 gap-4' >
          <Skeleton className="h-10 w-full" rounded="lg" />
          <Skeleton className="h-10 w-full" rounded="lg" />
        </div>
      </div>
    </div>
  )
}