ui changes and cs prices

src/routes/blog/+page.svelte

@@ -2,6 +2,9 @@
 	import { enhance } from '$app/forms';
 	import { resolve } from '$app/paths';
 	import { calendarDate, relativeTime } from '$lib/relative-time';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 	let searchQuery = $state('');
@@ -32,17 +35,9 @@
 					class="absolute top-full right-0 z-10 mt-3 w-72 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
 				>
 					<label class="block"
-						>title<input
-							name="title"
-							required
-							maxlength="256"
-							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
-						/></label
-					>
-					<button
-						class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
-						>create draft</button
+						>title<Input name="title" required maxlength={256} class="mt-2" /></label
 					>
+					<Button type="submit">create draft</Button>
 				</form>
 			</details>{/if}
 	</div>
@@ -50,30 +45,24 @@
 	<div class="mb-8 space-y-4">
 		<label class="block max-w-lg">
 			<span class="sr-only">Search articles</span>
-			<input
-				type="search"
-				placeholder="search articles"
-				bind:value={searchQuery}
-				class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 text-base"
-			/>
+			<Input type="search" placeholder="search articles" bind:value={searchQuery} class="h-11" />
 		</label>
 		{#if tags.length}
 			<div class="flex flex-wrap gap-x-4 gap-y-2" aria-label="Filter by tag">
-				<button
+				<Button
+					variant={!selectedTag ? 'secondary' : 'ghost'}
+					size="sm"
 					type="button"
 					onclick={() => (selectedTag = '')}
-					aria-pressed={!selectedTag}
-					class={selectedTag ? 'text-[var(--site-muted)]' : 'underline underline-offset-4'}
-					>all</button
+					aria-pressed={!selectedTag}>all</Button
 				>
 				{#each tags as tag (tag)}
-					<button
+					<Button
+						variant={selectedTag === tag ? 'secondary' : 'ghost'}
+						size="sm"
 						type="button"
 						onclick={() => (selectedTag = selectedTag === tag ? '' : tag)}
-						aria-pressed={selectedTag === tag}
-						class={selectedTag === tag
-							? 'underline underline-offset-4'
-							: 'text-[var(--site-muted)]'}>{tag}</button
+						aria-pressed={selectedTag === tag}>{tag}</Button
 					>
 				{/each}
 			</div>
@@ -90,8 +79,9 @@
 					<div
 						class="flex flex-wrap items-center gap-x-4 gap-y-1 text-base text-[var(--site-muted)]"
 					>
-						{#if data.isAdmin && article.status === 'draft'}<span>draft</span>{/if}
-						{#each article.tags as tag (tag)}<span>{tag}</span>{/each}
+						{#if data.isAdmin && article.status === 'draft'}<Badge variant="outline">draft</Badge
+							>{/if}
+						{#each article.tags as tag (tag)}<Badge variant="secondary">{tag}</Badge>{/each}
 						<time datetime={article.createdAt.toISOString()} title={calendarDate(article.createdAt)}
 							>{relativeTime(article.createdAt, data.now)}</time
 						>