fc857ad58f
feat(SW-2064): Lightbox updates * chore(SW-2064): add opacity to not selected images * chore(SW-2064): set main image as the first image in thumbnail * chore(SW-2064): disable navigation buttons on first and last image * fix(SW-2064): use cx * Revert "chore(SW-2064): disable navigation buttons on first and last image" This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947. * refactor(SW-2064): create ImageCounter component * refactor(SW-2064) * chore(SW-2064): add enter keu down on main image Approved-by: Erik Tiekstra
30 lines
739 B
TypeScript
30 lines
739 B
TypeScript
import { VariantProps } from "class-variance-authority"
|
|
import { Typography } from "../Typography"
|
|
import { variants } from "./variants"
|
|
import { MaterialIcon } from "../Icons/MaterialIcon"
|
|
|
|
interface ImageCounterProps extends VariantProps<typeof variants> {
|
|
number: number | string
|
|
leadingIcon?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function ImageCounter({
|
|
number,
|
|
size,
|
|
leadingIcon = false,
|
|
className,
|
|
}: ImageCounterProps) {
|
|
const classNames = variants({ className, size })
|
|
return (
|
|
<Typography variant="Tag/sm">
|
|
<span className={classNames}>
|
|
{leadingIcon && (
|
|
<MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
|
|
)}
|
|
{number}
|
|
</span>
|
|
</Typography>
|
|
)
|
|
}
|