web/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

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

import { HotelCardSkeleton } from "../HotelCard/HotelCardSkeleton"

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

type Props = {
  count?: number
}

export function SelectHotelSkeleton({ count = 4 }: Props) {
  return (
    <div className={styles.skeletonContainer}>
      <header className={styles.header}>
        <div className={styles.headerContent}>
          <div className={styles.title}>
            <div className={styles.cityInformation}>
              <SkeletonShimmer height={"25px"} width={"200px"} />
            </div>
            <div className={styles.sorter}>
              <SkeletonShimmer height={"60px"} width={"100%"} />
            </div>
          </div>
        </div>
      </header>
      <main className={styles.main}>
        <div className={styles.sideBar}>
          <div className={styles.sideBarItem}>
            <SkeletonShimmer height={"280px"} width={"340px"} />
          </div>
          <div className={styles.sideBarItem}>
            <SkeletonShimmer height={"400px"} width={"340px"} />
          </div>
        </div>
        <div className={styles.hotelList}>
          {Array.from({ length: count }).map((_, index) => (
            <HotelCardSkeleton key={index} />
          ))}
        </div>
      </main>
    </div>
  )
}