mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
export function OlToggle(props: {
|
|
toggled: boolean | undefined;
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
className="inline-flex cursor-pointer items-center"
|
|
onClick={props.onClick}
|
|
>
|
|
<button className="peer sr-only" />
|
|
<div
|
|
data-flash={props.toggled === undefined}
|
|
data-toggled={props.toggled ?? false}
|
|
className={`
|
|
peer relative h-7 w-14 rounded-full bg-gray-200
|
|
after:absolute after:start-[4px] after:top-0.5 after:h-6 after:w-6
|
|
after:rounded-full after:border after:border-gray-300 after:bg-white
|
|
after:transition-all after:content-['']
|
|
dark:border-gray-600 dark:peer-focus:ring-blue-800
|
|
dark:data-[toggled='true']:bg-blue-500
|
|
data-[flash='true']:after:animate-pulse
|
|
data-[toggled='false']:bg-gray-500
|
|
data-[toggled='true']:after:translate-x-full
|
|
data-[toggled='true']:after:border-white
|
|
peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300
|
|
rtl:data-[toggled='true']:after:-translate-x-full
|
|
`}
|
|
></div>
|
|
</div>
|
|
);
|
|
}
|