c54c1ec540
SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import SkeletonShimmer from '@scandic-hotels/design-system/SkeletonShimmer'
|
|
|
|
import styles from './HotelCardSkeleton.module.css'
|
|
|
|
export function HotelCardSkeleton() {
|
|
return (
|
|
<article className={styles.card}>
|
|
{/* image container */}
|
|
<div className={styles.imageContainer}>
|
|
<SkeletonShimmer width={'100%'} height="100%" />
|
|
</div>
|
|
|
|
<div className={styles.content}>
|
|
<SkeletonShimmer height={'65px'} />
|
|
<div className={styles.text}>
|
|
<SkeletonShimmer height={'20px'} />
|
|
<SkeletonShimmer height={'20px'} />
|
|
<SkeletonShimmer height={'20px'} />
|
|
<SkeletonShimmer height={'20px'} />
|
|
</div>
|
|
<SkeletonShimmer height={'56px'} />
|
|
<SkeletonShimmer height={'52px'} width={'150px'} />
|
|
</div>
|
|
|
|
<div className={styles.priceVariants}>
|
|
{/* price variants */}
|
|
{Array.from({ length: 2 }).map((_, index) => (
|
|
<SkeletonShimmer key={index} height={'100px'} />
|
|
))}
|
|
<SkeletonShimmer height={'40px'} />
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|