Skeleton

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

export const DefaultSkeletonExample = () => {
  return (
    <div className="space-y-4 w-full" >
      <Skeleton className="w-full h-12 " />
      <Skeleton className="w-3/4 h-8 " />
      <Skeleton className="w-1/2 h-6 " />
    </div>
  );
};

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

export const TextLinesExample = () => {
  return (
    <div className="space-y-6 w-full">
      <div>
        <Skeleton variant="text" lines={3} className="mb-4" />
        <Skeleton variant="text" lines={2} />
      </div>
    </div>
  );
};

import { Skeleton, SkeletonAvatar } from "@/components/ui/Skeleton";

export const UserProfileExample = () => {
  return (
    <div className="flex items-start space-x-4 p-4 bg-background border border-border rounded-lg">
      <SkeletonAvatar size="lg" />
      <div className="flex-1 space-y-2">
        <Skeleton variant="text" className="w-32 h-5" />
        <Skeleton variant="text" className="w-48 h-4" />
        <Skeleton variant="text" lines={2} className="mt-3" />
      </div>
    </div>
  );
};

import { SkeletonCard } from "@/components/ui/Skeleton";

export const SkeletonCardExample = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <SkeletonCard className="border border-border rounded-lg" />
      <SkeletonCard className="border border-border rounded-lg" />
    </div>
  );
};

import { Skeleton, SkeletonAvatar, SkeletonButton } from "@/components/ui/Skeleton";

export const VariantsExample = () => {
  return (
    <div className="space-y-6">
      <div className="flex items-center space-x-4">
        <SkeletonAvatar size="sm" />
        <SkeletonAvatar size="md" />
        <SkeletonAvatar size="lg" />
      </div>
      
      <div className="flex items-center space-x-4">
        <SkeletonButton size="sm" />
        <SkeletonButton size="md" />
        <SkeletonButton size="lg" />
      </div>
      
      <div className="space-y-3">
        <Skeleton variant="rectangular" className="w-full h-8" />
        <Skeleton variant="rounded" className="w-full h-8" />
        <Skeleton variant="circular" className="w-8 h-8" />
      </div>
    </div>
  );
};