Skeleton

import {
  CruiseSkeletonAvatar,
  CruiseSkeletonCard,
  CruiseSkeletonRegion,
  CruiseSkeletonTableRow,
  CruiseSkeletonText,
} from "@/components/cruise/skeleton";

export default function SkeletonExample() {
  return (
    <CruiseSkeletonRegion label="Loading orders…" className="grid gap-6 md:grid-cols-2">
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-3">
          <CruiseSkeletonAvatar />
          <div className="flex-1">
            <CruiseSkeletonText lines={2} />
          </div>
        </div>
        <CruiseSkeletonTableRow />
        <CruiseSkeletonTableRow />
      </div>
      <CruiseSkeletonCard />
    </CruiseSkeletonRegion>
  );
}