new-personal-site/components/lib/elements/Toggle.tsx
2024-12-09 16:36:17 +01:00

53 lines
1.5 KiB
TypeScript

import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
HTMLAttributes<HTMLDivElement>,
HTMLDivElement
> & {
active?: boolean;
setActive?: React.Dispatch<React.SetStateAction<boolean>>;
circleProps?: DetailedHTMLProps<
HTMLAttributes<HTMLDivElement>,
HTMLDivElement
>;
};
/**
* # Toggle Component
* @className_wrapper twui-toggle-wrapper
* @className_circle twui-toggle-circle
*/
export default function Toggle({
circleProps,
active,
setActive,
...props
}: TWUI_TOGGLE_PROPS) {
return (
<div
{...props}
className={twMerge(
"flex flex-row items-center w-[40px] p-[3px] transition-all",
"border border-slate-300 dark:border-white/30 border-solid rounded-full",
active ? "justify-end" : "justify-start",
"twui-toggle-wrapper",
props.className
)}
onClick={() => setActive?.(!active)}
>
<div
{...circleProps}
className={twMerge(
"w-3.5 h-3.5 rounded-full ",
active
? "bg-blue-600 dark:bg-blue-500"
: "bg-slate-300 dark:bg-white/40",
"twui-toggle-circle",
circleProps?.className
)}
></div>
</div>
);
}