71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
import { Link, useLocation } from "react-router";
|
|
import { Menu } from "@headlessui/react";
|
|
import { t as i18nT } from "i18next";
|
|
import clsx from "clsx";
|
|
import Dropdown from "./Dropdown";
|
|
|
|
export default function PreviewDropdownsSimple() {
|
|
const currentRoute = useLocation().pathname;
|
|
return (
|
|
<div className="not-prose border-border bg-background space-x-2 border border-dashed p-6">
|
|
<div className="w-full space-y-2">
|
|
<div className="flex justify-between">
|
|
<Dropdown
|
|
right={true}
|
|
onClick={() => alert(i18nT("components.dropdowns.preview.dropdownClick"))}
|
|
button={<div>{i18nT("components.dropdowns.preview.dropdown")}</div>}
|
|
options={
|
|
<div>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
type="button"
|
|
onClick={() => alert(i18nT("components.dropdowns.preview.clicked"))}
|
|
className={clsx("w-full text-left", active ? "text-foreground bg-secondary/90" : "text-foreground/80", "block px-4 py-2 text-sm")}
|
|
>
|
|
{i18nT("components.dropdowns.preview.button")}
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<Link
|
|
to={currentRoute}
|
|
className={clsx("w-full", active ? "text-foreground bg-secondary/90" : "text-foreground/80", "block px-4 py-2 text-sm")}
|
|
>
|
|
<div>{i18nT("components.dropdowns.preview.link")}</div>
|
|
</Link>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
}
|
|
></Dropdown>
|
|
<Dropdown
|
|
onClick={() => alert(i18nT("components.dropdowns.preview.dropdownClick"))}
|
|
button={<div>{i18nT("components.dropdowns.preview.dropdown")}</div>}
|
|
options={
|
|
<div>
|
|
<button
|
|
type="button"
|
|
className="hover:bg-secondary text-foreground/80 block w-full px-4 py-2 text-left text-sm focus:outline-hidden"
|
|
tabIndex={-1}
|
|
onClick={() => alert(i18nT("components.dropdowns.preview.clicked"))}
|
|
>
|
|
<div>{i18nT("components.dropdowns.preview.button")}</div>
|
|
</button>
|
|
<Link
|
|
to={currentRoute}
|
|
className="hover:bg-secondary text-foreground/80 block w-full px-4 py-2 text-left text-sm focus:outline-hidden"
|
|
tabIndex={-1}
|
|
>
|
|
<div>{i18nT("components.dropdowns.preview.link")}</div>
|
|
</Link>
|
|
</div>
|
|
}
|
|
></Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|