Add ToggleSwitch component and QuillSense settings management
- Added `ToggleSwitch` component for handling toggles with labels, descriptions, and disabled states. - Introduced `QuillSenseSetting` component for managing QuillSense enablement and advanced prompt settings. - Integrated `QuillSenseSettings` model and API calls for fetching and updating settings.
This commit is contained in:
59
components/form/ToggleSwitch.tsx
Normal file
59
components/form/ToggleSwitch.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
'use client';
|
||||
|
||||
import {Dispatch, SetStateAction} from 'react';
|
||||
|
||||
interface ToggleSwitchProps {
|
||||
enabled: boolean;
|
||||
setEnabled: Dispatch<SetStateAction<boolean>>;
|
||||
label?: string;
|
||||
description?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function ToggleSwitch({
|
||||
enabled,
|
||||
setEnabled,
|
||||
label,
|
||||
description,
|
||||
disabled = false
|
||||
}: ToggleSwitchProps) {
|
||||
function handleToggle(): void {
|
||||
if (!disabled) {
|
||||
setEnabled(!enabled);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
{label && (
|
||||
<span className="text-text-primary font-medium">{label}</span>
|
||||
)}
|
||||
{description && (
|
||||
<span className="text-text-secondary text-sm mt-1">{description}</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggle}
|
||||
disabled={disabled}
|
||||
className={`
|
||||
relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
|
||||
transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
|
||||
${enabled ? 'bg-primary' : 'bg-secondary'}
|
||||
${disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
role="switch"
|
||||
aria-checked={enabled}
|
||||
>
|
||||
<span
|
||||
className={`
|
||||
pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0
|
||||
transition duration-200 ease-in-out
|
||||
${enabled ? 'translate-x-5' : 'translate-x-0'}
|
||||
`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user