i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-09-03 10:00:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

polish: make section enable switch more visible

Browse Source 
Wrap the switch in a labeled pill ('Enabled'/'Disabled') with border
and background so the off state is clearly visible.
This commit is contained in:
dayuan.jiang
2026-06-10 20:58:58 +09:00
parent 9d958ae9c9
commit c09b454105
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/[lang]/admin/page.tsx
View File

@@ -724,17 +724,33 @@ export default function AdminPage() {
{group.title}
</h2>
{group.toggleable && (
<Switch
checked={!!enabledGroups[group.id]}
disabled={!writable}
aria-label={`Enable ${group.title}`}
onCheckedChange={(checked) =>
setEnabledGroups((prev) => ({
...prev,
[group.id]: checked,
}))
}
/>
<label
className={cn(
"flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors motion-reduce:transition-none",
enabledGroups[group.id]
? "border-primary/30 bg-primary/5 text-primary"
: "border-border bg-muted/50 text-muted-foreground hover:border-foreground/30 hover:text-foreground",
)}
>
{enabledGroups[group.id]
? "Enabled"
: "Disabled"}
<Switch
checked={
!!enabledGroups[group.id]
}
disabled={!writable}
aria-label={`Enable ${group.title}`}
onCheckedChange={(checked) =>
setEnabledGroups(
(prev) => ({
...prev,
[group.id]: checked,
}),
)
}
/>
</label>
)}
</div>
<p className="mb-3 mt-1 text-sm text-muted-foreground text-pretty">