Joakim Jäderberg
da07e8a458
Feature/autocomplete search * wip autocomplete search * add skeletons to loading * Using aumlauts/accents when searching will still give results remove unused reducer sort autocomplete results * remove testcode * Add tests for autocomplete * cleanup tests * use node@20 * use node 22 * use node22 * merge fix: search button outside of viewport * merge * remove more unused code * fix: error message when empty search field in booking widget * fix: don't display empty white box when search field is empty and no searchHistory is present * merge * fix: set height of shimmer for search skeleton * rename autocomplete trpc -> destinationsAutocomplete * more accute cache key naming * fix: able to control wether bookingwidget is visible on startPage fix: sticky booking widget under alert * remove unused code * fix: skeletons fix: error overlay on search startpage * remove extra .nvmrc * merge Approved-by: Linus Flood
49 lines
983 B
TypeScript
49 lines
983 B
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 */}
|
|
<span aria-hidden="true">​</span>
|
|
</span>
|
|
)
|
|
}
|