41 lines
2.2 KiB
TypeScript
41 lines
2.2 KiB
TypeScript
import ButtonPrimary from "./ButtonPrimary";
|
|
import { t as i18nT } from "i18next";
|
|
import ButtonSecondary from "./ButtonSecondary";
|
|
import ButtonTertiary from "./ButtonTertiary";
|
|
import LoadingButton, { RefLoadingButton } from "./LoadingButton";
|
|
import { useRef } from "react";
|
|
|
|
export default function PreviewButtons() {
|
|
const loadingButton = useRef<RefLoadingButton>(null);
|
|
function startLoading() {
|
|
if (loadingButton.current) {
|
|
loadingButton.current?.start();
|
|
setTimeout(() => {
|
|
loadingButton.current?.stop();
|
|
}, 2000);
|
|
}
|
|
}
|
|
return (
|
|
<div id="buttons">
|
|
<div className="border-muted-foreground overflow-hidden rounded-lg border-2 border-dashed p-6">
|
|
<div id="buttons" className="w-full space-y-2">
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center justify-center space-y-4 sm:flex-row sm:items-end sm:justify-center sm:space-y-0 sm:space-x-4">
|
|
<ButtonPrimary onClick={() => alert(i18nT("components.buttons.preview.clickedPrimary"))}>{i18nT("components.buttons.preview.primary")}</ButtonPrimary>
|
|
<ButtonSecondary onClick={() => alert(i18nT("components.buttons.preview.clickedSecondary"))}>{i18nT("components.buttons.preview.secondary")}</ButtonSecondary>
|
|
<ButtonTertiary onClick={() => alert(i18nT("components.buttons.preview.clickedTertiary"))}>{i18nT("components.buttons.preview.tertiary")}</ButtonTertiary>
|
|
<LoadingButton ref={loadingButton} onClick={() => startLoading()}>
|
|
{i18nT("components.buttons.preview.loading")}
|
|
</LoadingButton>
|
|
</div>
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center justify-center space-y-4 sm:flex-row sm:items-end sm:justify-center sm:space-y-0 sm:space-x-4">
|
|
<ButtonPrimary disabled={true}>{i18nT("components.buttons.preview.primary")}</ButtonPrimary>
|
|
<ButtonSecondary disabled={true}>{i18nT("components.buttons.preview.secondary")}</ButtonSecondary>
|
|
<ButtonTertiary disabled={true}>{i18nT("components.buttons.preview.tertiary")}</ButtonTertiary>
|
|
<LoadingButton disabled={true}>{i18nT("components.buttons.preview.loading")}</LoadingButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|