57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
ScrollArea,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { HelpCircleIcon } from "lucide-react";
|
|
import type React from "react";
|
|
|
|
import { useTranslation } from "../../locales/i18n.ts";
|
|
|
|
interface HelpButtonProps {
|
|
buttonText: string;
|
|
title?: string;
|
|
content: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const HelpButton = ({
|
|
buttonText,
|
|
title = "",
|
|
content,
|
|
className = "",
|
|
}: HelpButtonProps) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={`flex items-baseline justify-center mr-4 font-medium ${className}`}>
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button className="inline-flex items-center font-medium group" variant="link">
|
|
<span className="underline-offset-4 group-hover:underline">{buttonText}</span>
|
|
<HelpCircleIcon className="w-4 h-4 ml-1 text-muted-foreground" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<ScrollArea className="grid gap-4 py-2">
|
|
{content}
|
|
<DialogFooter>
|
|
<DialogClose asChild>
|
|
<Button type="button">{t("common.close")}</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</ScrollArea>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|