schoolbox desktop app :)
42willow.github.io
1<script lang="ts">
2 import type { IconProps } from "@lucide/svelte";
3 import type { Snippet } from "svelte";
4
5 interface Props {
6 id: string;
7 placeholder: string;
8 value: string;
9 onclick?: (event: Event) => void;
10 label?: string;
11 submitButton?: boolean;
12 required?: boolean;
13 icon?: Snippet<[IconProps]>;
14 }
15
16 let {
17 id,
18 placeholder,
19 value = $bindable(),
20 onclick,
21 label = "Submit",
22 submitButton = true,
23 required = true,
24 icon,
25 }: Props = $props();
26</script>
27
28<div class="flex w-full items-center justify-center rounded-md border-1 border-ctp-surface0">
29 <input
30 {id}
31 class="min-w-0 flex-grow p-2 placeholder-ctp-overlay1 {submitButton ? 'rounded-l-md' : 'rounded-md'}"
32 bind:value
33 {placeholder}
34 type="text"
35 {required} />
36 {#if icon}
37 {@render icon({ class: "size-9 px-2 text-ctp-overlay1" })}
38 {/if}
39 {#if submitButton}
40 <button class="rounded-r-md bg-(--ctp-accent) p-2 text-ctp-base" type="submit" {onclick}>{label}</button>
41 {/if}
42</div>