87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type QuickSettingsOptionProps = {
|
|
name: string
|
|
label: string
|
|
checked: boolean
|
|
disabled?: boolean
|
|
onSelect: () => void
|
|
icon?: React.ReactNode
|
|
}
|
|
|
|
export function QuickSettingsOption({
|
|
name,
|
|
label,
|
|
checked,
|
|
disabled = false,
|
|
onSelect,
|
|
icon,
|
|
}: QuickSettingsOptionProps) {
|
|
return (
|
|
<label
|
|
className={cn(
|
|
"flex cursor-pointer items-center gap-3 rounded-md px-1 py-2 transition-colors",
|
|
disabled
|
|
? "cursor-not-allowed opacity-45"
|
|
: "hover:bg-mail-surface-muted"
|
|
)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name={name}
|
|
checked={checked}
|
|
disabled={disabled}
|
|
onChange={onSelect}
|
|
className="size-[18px] shrink-0 accent-[#1a73e8] disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"min-w-0 flex-1 text-sm",
|
|
checked ? "text-[#1a73e8]" : "text-foreground"
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
{icon ? <span className="shrink-0">{icon}</span> : null}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
export function QuickSettingsCheckbox({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
icon,
|
|
helpLabel,
|
|
}: {
|
|
label: string
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
icon?: React.ReactNode
|
|
helpLabel?: string
|
|
}) {
|
|
return (
|
|
<label className="flex cursor-pointer items-center gap-3 rounded-md px-1 py-2 hover:bg-mail-surface-muted">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e) => onChange(e.target.checked)}
|
|
className="size-[18px] shrink-0 rounded-sm accent-[#1a73e8]"
|
|
/>
|
|
<span className="min-w-0 flex-1 text-sm text-foreground">{label}</span>
|
|
{helpLabel ? (
|
|
<span
|
|
className="flex size-5 shrink-0 items-center justify-center rounded-full text-xs text-[#5f6368]"
|
|
title={helpLabel}
|
|
aria-label={helpLabel}
|
|
>
|
|
?
|
|
</span>
|
|
) : null}
|
|
{icon ? <span className="shrink-0">{icon}</span> : null}
|
|
</label>
|
|
)
|
|
}
|