Skeleton

import { Skeleton } from "@medway-ui/core";
 
<div className="space-y-4">
  <Skeleton className="h-4 w-[250px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[150px]" />
</div>

import { Skeleton } from "@medway-ui/core";
 
<div className="max-w-sm">
  <div className="space-y-4">
    <Skeleton className="h-[200px] w-full rounded-lg" />
    <div className="space-y-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-4/5" />
      <Skeleton className="h-4 w-3/5" />
    </div>
    <div className="flex items-center space-x-4">
      <Skeleton className="h-10 w-10 rounded-full" />
      <div className="space-y-2 flex-1">
        <Skeleton className="h-4 w-1/2" />
        <Skeleton className="h-3 w-1/3" />
      </div>
    </div>
  </div>
</div>

import { Skeleton } from "@medway-ui/core";
 
<div className="max-w-md">
  <div className="flex items-start space-x-4 p-4">
    <Skeleton className="h-16 w-16 rounded-full" />
    <div className="flex-1 space-y-3">
      <div className="space-y-2">
        <Skeleton className="h-5 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
      </div>
      <div className="space-y-1">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-5/6" />
        <Skeleton className="h-3 w-4/6" />
      </div>
      <div className="flex space-x-2 pt-2">
        <Skeleton className="h-8 w-16 rounded" />
        <Skeleton className="h-8 w-20 rounded" />
      </div>
    </div>
  </div>
</div>

import { Skeleton } from "@medway-ui/core";
 
<div className="space-y-8">
  {/* Text lines */}
  <div className="space-y-2">
    <h3 className="text-sm font-medium mb-3">Text Lines</h3>
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-5/6" />
    <Skeleton className="h-4 w-4/6" />
  </div>
  
  {/* Circular */}
  <div className="space-y-2">
    <h3 className="text-sm font-medium mb-3">Circular</h3>
    <div className="flex space-x-4">
      <Skeleton className="h-8 w-8 rounded-full" />
      <Skeleton className="h-12 w-12 rounded-full" />
      <Skeleton className="h-16 w-16 rounded-full" />
      <Skeleton className="h-20 w-20 rounded-full" />
    </div>
  </div>
  
  {/* Rectangular */}
  <div className="space-y-2">
    <h3 className="text-sm font-medium mb-3">Rectangular</h3>
    <div className="flex space-x-4">
      <Skeleton className="h-20 w-20" />
      <Skeleton className="h-20 w-32" />
      <Skeleton className="h-20 w-48" />
    </div>
  </div>
  
  {/* Rounded */}
  <div className="space-y-2">
    <h3 className="text-sm font-medium mb-3">Rounded</h3>
    <div className="flex space-x-4">
      <Skeleton className="h-20 w-20 rounded-lg" />
      <Skeleton className="h-20 w-32 rounded-xl" />
      <Skeleton className="h-20 w-48 rounded-2xl" />
    </div>
  </div>
</div>