Skeleton für Unterkünfte

import { motion } from "framer-motion";

interface StaySkeletonProps {
  /** Segundos que tarda el brillo en cruzar la foto. */
  speed?: number;
}

export default function StaySkeleton({
  speed = 1.6,
}: StaySkeletonProps) {
  return (
    <div aria-busy="true" className="w-full max-w-64 space-y-3">
      <div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-black/5 dark:bg-white/10">
        <motion.div
          className="absolute inset-0 bg-[linear-gradient(90deg,transparent,rgba(29,29,31,0.08),transparent)] bg-[length:200%_100%] dark:bg-[linear-gradient(90deg,transparent,rgba(245,245,247,0.08),transparent)]"
          animate={{ backgroundPosition: ["200% 0", "-200% 0"] }}
          transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
        />
      </div>
      <div className="h-3 w-4/5 rounded-full bg-black/5 dark:bg-white/10" />
      <div className="h-3 w-2/5 rounded-full bg-black/5 dark:bg-white/10" />
      <div className="h-3 w-1/3 rounded-full bg-black/5 dark:bg-white/10" />
    </div>
  );
}