bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-06-29 12:49:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: change settings pages

Browse source
This commit is contained in:
Bart van der Braak 2024-02-02 02:13:59 +01:00
parent 32b6bf7582
commit 7fc6c736ad
8 changed files with 73 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

47
apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
View file

@ -3,13 +3,9 @@
import { z } from 'zod';
export const appearanceFormSchema = z.object({
theme: z.enum(['light', 'dark'], {
theme: z.enum(['light', 'dark', 'system'], {
required_error: 'Please select a theme.'
}),
font: z.enum(['inter', 'manrope', 'system'], {
invalid_type_error: 'Select a font',
required_error: 'Please select a font.'
})
});
export type AppearanceFormSchema = typeof appearanceFormSchema;
@ -18,6 +14,7 @@
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import Label from '$lib/components/ui/label/label.svelte';
import { dev } from '$app/environment';
export let data: SuperValidated<AppearanceFormSchema>;
</script>
@ -27,28 +24,14 @@
class="space-y-8"
method="POST"
let:config
debug={true}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field {config} name="font">
<Form.Label>Font</Form.Label>
<div class="w-max">
<Form.NativeSelect class="w-[200px]">
<option value="inter">Inter</option>
<option value="manrope">Manrope</option>
<option value="system">System</option>
</Form.NativeSelect>
</div>
<Form.Description>Set the font you want to use in the dashboard.</Form.Description>
<Form.Validation />
</Form.Field>
</Form.Item>
<Form.Item>
<Form.Field {config} name="theme">
<Form.Label>Theme</Form.Label>
<Form.Description>Select the theme for the dashboard.</Form.Description>
<Form.Validation />
<Form.RadioGroup class="grid max-w-md grid-cols-2 gap-8 pt-2" orientation="horizontal">
<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
<Form.RadioItem id="light" value="light" class="sr-only" />
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@ -91,6 +74,28 @@
</div>
<span class="block w-full p-2 text-center font-normal"> Dark </span>
</Label>
<Label for="system" class="[&:has([data-state=checked])>div]:border-primary">
<Form.RadioItem id="system" value="system" class="sr-only" />
<div
class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
>
<div class="space-y-2 rounded-sm bg-slate-500 p-2">
<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-2 w-[80px] rounded-lg bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
</div>
</div>
<span class="block w-full p-2 text-center font-normal"> System </span>
</Label>
</Form.RadioGroup>
</Form.Field>
</Form.Item>