60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
|
|
import styles from "./hotelListingItem.module.css"
|
|
|
|
export default function HotelListingItemSkeleton() {
|
|
return (
|
|
<article className={styles.hotelListingItem}>
|
|
<div className={styles.imageWrapper}>
|
|
<SkeletonShimmer width="100%" height="220px" />
|
|
</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.intro}>
|
|
<SkeletonShimmer width="20ch" height="30px" />
|
|
<Typography variant="Title/Subtitle/md">
|
|
<SkeletonShimmer width="25ch" />
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<div className={styles.captions}>
|
|
<SkeletonShimmer width="10ch" />
|
|
<span>
|
|
<Divider
|
|
className={styles.divider}
|
|
variant="vertical"
|
|
color="Border/Divider/Default"
|
|
/>
|
|
</span>
|
|
<SkeletonShimmer width="20ch" />
|
|
</div>
|
|
</Typography>
|
|
</div>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
<SkeletonShimmer width="100%" />
|
|
<SkeletonShimmer width="70%" />
|
|
<SkeletonShimmer width="35%" />
|
|
</p>
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<ul className={styles.amenityList}>
|
|
{Array.from({ length: 5 }).map((_, index) => {
|
|
return (
|
|
<li className={styles.amenityItem} key={index}>
|
|
<SkeletonShimmer width="20px" height="20px" />
|
|
<SkeletonShimmer width="15ch" />
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</Typography>
|
|
</div>
|
|
<div className={styles.ctaWrapper}>
|
|
<SkeletonShimmer width="100%" height="40px" />
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|