7045cd8e25
* feat: setup onboarding and select plan page * feat: add workspace details step * refactor: optimize board rendering in workspace details * feat: tweak padding in boards mockup * fix: validate/convert slug input * refactor: tweak onboarding steps UX * feat: add team to workspace plans * feat: allow setting description when creating a workspace * feat: add logging to next api routes * feat: create worspace on checkout.session.completed * chore: update types * refactor: improve webhook logs * feat: create workspace on successful activation * feat: set slug on workspace name change * feat: add returnUrl params
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Switch } from "@headlessui/react";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const Toggle = ({
|
|
isChecked,
|
|
onChange,
|
|
label,
|
|
disabled,
|
|
showLabel = true,
|
|
labelPosition = "before",
|
|
}: {
|
|
isChecked: boolean;
|
|
onChange: () => void;
|
|
label: string;
|
|
disabled?: boolean;
|
|
showLabel?: boolean;
|
|
labelPosition?: "before" | "after";
|
|
}) => (
|
|
<div className="flex items-center">
|
|
{showLabel && labelPosition === "before" && (
|
|
<span className="mr-2 text-xs text-light-900 dark:text-dark-900">
|
|
{label}
|
|
</span>
|
|
)}
|
|
<Switch
|
|
checked={isChecked}
|
|
onChange={onChange}
|
|
disabled={disabled}
|
|
className={twMerge(
|
|
"relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-light-800 transition-colors duration-200 ease-in-out focus:outline-none dark:bg-dark-800",
|
|
isChecked && "bg-indigo-600 dark:bg-indigo-600",
|
|
)}
|
|
>
|
|
<span className="sr-only">{label}</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className={twMerge(
|
|
"pointer-events-none inline-block h-3 w-3 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
|
|
isChecked && "translate-x-2",
|
|
)}
|
|
/>
|
|
</Switch>
|
|
{showLabel && labelPosition === "after" && (
|
|
<span className="ml-2 text-xs text-light-900 dark:text-dark-900">
|
|
{label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export default Toggle;
|