cards and stuff

src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className,
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className,
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLParagraphElement> = $props();
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</p>

src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className,
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className,
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className = undefined,
+		tag = "h3",
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	} = $props();
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

src/lib/components/ui/card/card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	const {
+		class: className,
+
+		children,
+		...rest
+	}: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	class={cn(
+		"rounded-lg border bg-card text-card-foreground shadow-sm",
+		className,
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

src/routes/(auth)/signup/+page.svelte

@@ -9,15 +9,15 @@
 
 	const username = writable({ username: "" });
 
-	const query = rpc.auth.check_username_availability.createQuery($username);
+	const query = rpc.auth.check_username_availability.createQuery(username);
 </script>
 
 <input
 	type="text"
 	oninput={debounce((ev) => {
 		ev.preventDefault();
 		if (!(ev.target instanceof HTMLInputElement)) return;
-		username.set({username: ev.target.value});
+		username.set({ username: ev.target.value });
 		utils.auth.check_username_availability.invalidate();
 	}, 500)}
 />