Files
web/components/TempDesignSystem/ShowMoreButton/index.tsx
2024-10-08 15:11:53 +02:00

44 lines
1009 B
TypeScript

"use client"
import { useIntl } from "react-intl"
import { ChevronDownIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { showMoreButtonVariants } from "./variants"
import styles from "./showMoreButton.module.css"
import type { ShowMoreButtonProps } from "./showMoreButton"
export default function ShowMoreButton({
className,
intent,
disabled,
showLess,
loadMoreData,
}: ShowMoreButtonProps) {
const intl = useIntl()
const classNames = showMoreButtonVariants({
className,
intent,
})
return (
<div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
<Button
className={styles.button}
disabled={disabled}
onClick={loadMoreData}
variant="icon"
type="button"
theme="base"
intent="text"
>
<ChevronDownIcon className={styles.icon} />
{intl.formatMessage({ id: showLess ? "Show less" : "Show more" })}
</Button>
</div>
)
}