84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import React, { ReactNode } from "react";
|
|
// * Components shadcn
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Label } from "@/components/ui/label";
|
|
// * Other
|
|
import InputError from "@/back/Components/InputError";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SimpleSwitchProps = {
|
|
name: string;
|
|
checked?: boolean;
|
|
description?: string | React.ReactNode;
|
|
label?: ReactNode | string;
|
|
leftHelper?: string;
|
|
rightHelper?: string;
|
|
className?: string;
|
|
inputClassName?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
parentErrors?: Record<string, string> | null;
|
|
// eslint-disable-next-line no-unused-vars
|
|
setData: (name: string, value: boolean) => void;
|
|
labelClassName?: string;
|
|
descClassName?: string;
|
|
title?: string;
|
|
};
|
|
|
|
export default function SimpleSwitch({
|
|
name,
|
|
checked,
|
|
description,
|
|
label,
|
|
leftHelper,
|
|
rightHelper,
|
|
className = "",
|
|
inputClassName= "",
|
|
required = false,
|
|
disabled = false,
|
|
parentErrors = null,
|
|
descClassName = "text-xs",
|
|
labelClassName = "text-sm",
|
|
title = name,
|
|
setData,
|
|
}: SimpleSwitchProps) {
|
|
const { errors } = usePage().props;
|
|
const localErrors = parentErrors ?? errors;
|
|
|
|
return (
|
|
<div className={cn('flex flex-col items-start w-fit gap-1.5', className)}>
|
|
<div>
|
|
{label && (
|
|
<Label htmlFor={name} className={cn('flex items-center gap-1.5', labelClassName)}>
|
|
{label}
|
|
{required && " *"}
|
|
</Label>
|
|
)}
|
|
{description && (
|
|
<p className={cn('text-muted-foreground', descClassName)}>{description}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{leftHelper && <small>{leftHelper}</small>}
|
|
<Switch
|
|
title={title}
|
|
id={name}
|
|
name={name}
|
|
onCheckedChange={(value) => setData(name, value)}
|
|
required={required}
|
|
checked={checked}
|
|
disabled={disabled}
|
|
className={cn(
|
|
inputClassName,
|
|
{
|
|
"border-destructive/50": localErrors[name],
|
|
})}
|
|
/>
|
|
{rightHelper && <small>{rightHelper}</small>}
|
|
</div>
|
|
<InputError message={localErrors[name]} />
|
|
</div>
|
|
);
|
|
}
|