ae77fa3028
Refactor TripadvisorChip * feat: create new StaticChip componeny * refactor tripadvisor chip to use ChipStatic * refactor: use TripadvisorChip everywhere * fix: use withChipStatic Approved-by: Erik Tiekstra
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { cva, type VariantProps } from "class-variance-authority"
|
|
import TripadvisorIcon from "../Icons/Customised/Socials/Tripadvisor"
|
|
import styles from "./tripAdvisorChip.module.css"
|
|
import { ChipStatic, withChipStatic } from "../ChipStatic"
|
|
|
|
const container = cva(styles.container, {
|
|
variants: {
|
|
wrapper: {
|
|
x05: styles["padding-x05"],
|
|
x15: styles["padding-x15"],
|
|
x2: styles["padding-x2"],
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
wrapper: undefined,
|
|
},
|
|
})
|
|
|
|
const _chipVariant = cva("", withChipStatic({}))
|
|
|
|
interface TripAdvisorProps
|
|
extends VariantProps<typeof container>, VariantProps<typeof _chipVariant> {
|
|
rating: number
|
|
}
|
|
|
|
export function TripAdvisorChip({
|
|
rating,
|
|
wrapper,
|
|
size = "sm",
|
|
color = "Subtle",
|
|
}: TripAdvisorProps) {
|
|
const content = (
|
|
<ChipStatic size={size} color={color}>
|
|
<TripadvisorIcon size={16} color="CurrentColor" />
|
|
{rating}
|
|
</ChipStatic>
|
|
)
|
|
|
|
return wrapper ? (
|
|
// Wrapping the chip in a transparent container with some padding to increase the touch target
|
|
<div className={container({ wrapper })}>{content}</div>
|
|
) : (
|
|
content
|
|
)
|
|
}
|