web/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx

import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

import styles from "./linkedReservationCardSkeleton.module.css"

export function LinkedReservationCardSkeleton() {
  return (
    <div className={styles.card}>
      <div className={styles.content}>
        <div className={styles.img}>
          <SkeletonShimmer height="204px" width="100%" />
        </div>
        <div className={styles.roomDetails}>
          <div className={styles.roomName}>
            <SkeletonShimmer height="24px" width="130px" />
            <SkeletonShimmer height="20px" width="140px" />
          </div>
          <div className={styles.details}>
            <SkeletonShimmer height="20px" width="300px" />
            <SkeletonShimmer height="20px" width="300px" />
            <SkeletonShimmer height="20px" width="300px" />
            <SkeletonShimmer height="20px" width="300px" />
          </div>
          <div className={styles.guest}>
            <SkeletonShimmer height="20px" width="100px" />
            <SkeletonShimmer height="20px" width="200px" />
            <SkeletonShimmer height="20px" width="150px" />
            <SkeletonShimmer height="20px" width="300px" />
          </div>
        </div>
      </div>
    </div>
  )
}