feat: added particle and reformatting

This commit is contained in:
Bart van der Braak 2024-02-02 01:08:13 +01:00
parent 5158767019
commit 32b6bf7582
147 changed files with 1186 additions and 922 deletions

View file

@ -1,14 +1,14 @@
<script lang="ts" context="module">
import type { SuperValidated } from "sveltekit-superforms";
import { z } from "zod";
import type { SuperValidated } from 'sveltekit-superforms';
import { z } from 'zod';
export const appearanceFormSchema = z.object({
theme: z.enum(["light", "dark"], {
required_error: "Please select a theme."
theme: z.enum(['light', 'dark'], {
required_error: 'Please select a theme.'
}),
font: z.enum(["inter", "manrope", "system"], {
invalid_type_error: "Select a font",
required_error: "Please select a font."
font: z.enum(['inter', 'manrope', 'system'], {
invalid_type_error: 'Select a font',
required_error: 'Please select a font.'
})
});
@ -16,8 +16,8 @@
</script>
<script lang="ts">
import * as Form from "$lib/components/ui/form";
import Label from "$lib/components/ui/label/label.svelte";
import * as Form from '$lib/components/ui/form';
import Label from '$lib/components/ui/label/label.svelte';
export let data: SuperValidated<AppearanceFormSchema>;
</script>
@ -51,23 +51,17 @@
<Form.RadioGroup class="grid max-w-md grid-cols-2 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"
>
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
<div
class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
>
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
<div
class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
>
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
</div>
@ -85,15 +79,11 @@
<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>
<div
class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
>
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-400" />
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>
<div
class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
>
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-400" />
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
</div>