61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
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,
|
|
buttonIntent,
|
|
intent,
|
|
disabled,
|
|
showLess,
|
|
textShowMore,
|
|
textShowLess,
|
|
loadMoreData,
|
|
}: ShowMoreButtonProps) {
|
|
const intl = useIntl()
|
|
const classNames = showMoreButtonVariants({
|
|
className,
|
|
buttonIntent,
|
|
})
|
|
|
|
if (!textShowMore) {
|
|
textShowMore = intl.formatMessage({
|
|
id: "Show more",
|
|
})
|
|
}
|
|
|
|
if (!textShowLess) {
|
|
textShowLess = intl.formatMessage({
|
|
id: "Show less",
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
|
|
<Button
|
|
className={styles.button}
|
|
disabled={disabled}
|
|
onClick={loadMoreData}
|
|
variant="icon"
|
|
type="button"
|
|
theme="base"
|
|
intent={intent ?? "text"}
|
|
fullWidth={intent ? true : false}
|
|
size={intent && "small"}
|
|
>
|
|
<ChevronDownIcon className={styles.icon} />
|
|
{showLess ? textShowLess : textShowMore}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|