feat: components

web/package.json

@@ -34,6 +34,8 @@
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"svelte-headless-table": "^0.18.2",
+		"tailwindcss": "^3.4.4",
 		"tailwindcss": "^3.4.4",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

web/src/lib/components/ui/lesson/index.ts

@@ -0,0 +1 @@
+export { default as Root, default as Lesson } from './lesson.svelte';

web/src/lib/components/ui/lesson/lesson.svelte

@@ -0,0 +1,42 @@
+<script context="module" lang="ts">
+  export type Color =
+    | 'purple'
+    | 'orange'
+    | 'lightBlue'
+    | 'blue'
+    | 'green'
+    | 'red'
+    | 'yellow'
+    | 'brown'
+    | 'aquamarine';
+</script>
+
+<script lang="ts">
+  let title: string = 'Deutsch';
+  let leftCorner: string = 'Suc';
+  let rightCorner: string = '105';
+  let length: number = 1;
+  export { title, leftCorner, rightCorner, length };
+
+  export let color: Color = 'red';
+  const colorClasses: Record<Color, string> = {
+    purple: 'bg-subjectPurple',
+    red: 'bg-subjectRed',
+    orange: 'bg-subjectOrange',
+    lightBlue: 'bg-subjectLightBlue',
+    blue: 'bg-subjectBlue',
+    green: 'bg-subjectGreen',
+    yellow: 'bg-subjectYellow',
+    brown: 'bg-subjectBrown',
+    aquamarine: 'bg-subjectAquamarine',
+  };
+</script>
+
+<div
+  class="row-span-{length} flex flex-col {colorClasses[color]} p-4 items-center rounded-lg gap-2 justify-between w-full h-full">
+  <p>{ title }</p>
+  <div class="flex flex-row justify-between w-full gap-6">
+    <p>{ leftCorner }</p>
+    <p>{ rightCorner }</p>
+  </div>
+</div>

web/src/lib/elements/ui/button/button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>

web/src/lib/elements/ui/button/index.ts

@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};

web/src/lib/elements/ui/checkbox/checkbox.svelte

@@ -14,7 +14,7 @@
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-foreground data-[state=checked]:text-white data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked

web/src/lib/elements/ui/dataTable/data-table-actions.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import Ellipsis from "lucide-svelte/icons/ellipsis";
+    import * as DropdownMenu from "$lib/elements/ui/dropdown-menu";
+    import { Button } from "$lib/elements/ui/button";
+
+    export let id: string;
+  </script>
+
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger asChild let:builder>
+      <Button
+        variant="ghost"
+        builders={[builder]}
+        size="icon"
+        class="relative h-8 w-8 p-0"
+      >
+        <span class="sr-only">Open menu</span>
+        <Ellipsis class="h-4 w-4" />
+      </Button>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Group>
+        <DropdownMenu.Label>Actions</DropdownMenu.Label>
+        <DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>
+          Copy payment ID
+        </DropdownMenu.Item>
+      </DropdownMenu.Group>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item>View customer</DropdownMenu.Item>
+      <DropdownMenu.Item>View payment details</DropdownMenu.Item>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>

web/src/lib/elements/ui/dataTable/data-table-checkbox.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { Checkbox } from "$lib/elements/ui/checkbox";
+    import type { Writable } from "svelte/store";
+
+    export let checked: Writable<boolean>;
+  </script>
+
+  <Checkbox bind:checked={$checked} />