feat: add ui kit page

2026-08-27 21:35:01 +05:00
parent 8437c95a28
commit 06d185add6
6 changed files with 332 additions and 6 deletions
@@ -4,6 +4,7 @@
 		type?: string;
 		placeholder?: string;
 		readonly?: boolean;
+		label?: string;
 		oninput?: (value: string) => void;
 	}
 	let {
@@ -11,6 +12,7 @@
 		type = "text",
 		placeholder = "",
 		readonly = false,
+		label,
 		oninput,
 	}: Props = $props();

@@ -26,6 +28,7 @@
 	{placeholder}
 	{readonly}
 	{value}
+	aria-label={label}
 	oninput={handle}
 />

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import { ArrowUpRight } from "@lucide/svelte";
-	import type { Snippet } from "svelte";
+	import type { Component } from "svelte";
+	import Icon from "./Icon.svelte";

 	interface Props {
 		title: string;
 		href: string;
 		description?: string;
 		index?: number;
-		icon?: Snippet;
+		icon?: Component<{ size?: number; class?: string }>;
 	}
 	let { title, href, description, index, icon }: Props = $props();
 </script>

 <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 <a class="tool-card" {href}>
-	{#if icon}<span class="tool-icon">{@render icon()}</span>{/if}
+	{#if icon}<span class="tool-icon"><Icon {icon} size={18} /></span>{/if}
 	<span class="tool-index">
 		{index !== undefined ? index.toString().padStart(2, "0") : ""}
 	</span>