80c3327419
Fix/linting * fix import issues and add lint check no-extraneous-dependencies * fix use type HotelType instead of string Approved-by: Anton Gunnarsson
50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
import { cva, cx } from 'class-variance-authority'
|
|
|
|
import styles from './skeleton.module.css'
|
|
|
|
const variants = cva(styles.shimmer, {
|
|
variants: {
|
|
contrast: {
|
|
light: styles.light,
|
|
dark: styles.dark,
|
|
},
|
|
display: {
|
|
block: styles.block,
|
|
'inline-block': styles.inlineBlock,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
contrast: 'light',
|
|
display: 'inline-block',
|
|
},
|
|
})
|
|
|
|
export default function SkeletonShimmer({
|
|
className,
|
|
height,
|
|
width,
|
|
contrast = 'light',
|
|
display = 'inline-block',
|
|
}: {
|
|
className?: string
|
|
height?: string
|
|
width?: string
|
|
contrast?: 'light' | 'dark'
|
|
display?: 'block' | 'inline-block'
|
|
}) {
|
|
return (
|
|
<span
|
|
className={cx(className, variants({ contrast, display }))}
|
|
style={{
|
|
height: height,
|
|
width: width,
|
|
maxWidth: '100%',
|
|
}}
|
|
>
|
|
{/* zero width space, allows for font styles to affect height */}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<span aria-hidden="true">​</span>
|
|
</span>
|
|
)
|
|
}
|