feat: dashboard interface

app/components/LinksTable.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+const props = defineProps<{
+  data: Link[];
+  status: "pending" | "idle" | "success" | "error";
+}>();
+
+const emit = defineEmits<{
+  edit: [link: Link];
+  delete: [link: Link];
+}>();
+
+const UButton = resolveComponent("UButton");
+
+const columns: TableColumn<Link>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "path", header: "Path" },
+  {
+    accessorKey: "url",
+    header: "URL",
+    cell: ({ row }) =>
+      h("a", {
+          href: row.original.url,
+          target: "_blank",
+          class: "text-primary hover:underline truncate max-w-xs block",
+        },
+        row.original.url,
+      ),
+  },
+  {
+    id: "actions",
+    cell: ({ row }) =>
+      h("div", { class: "flex justify-end gap-1" }, [
+        h(UButton, {
+          icon: "i-lucide-pencil",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => emit("edit", row.original),
+        }),
+        h(UButton, {
+          icon: "i-lucide-trash-2",
+          variant: "ghost",
+          size: "sm",
+          color: "error",
+          onClick: () => emit("delete", row.original),
+        }),
+      ]),
+  },
+];
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :loading="status === 'pending' || status === 'idle'"
+  >
+    <template #empty>
+      {{ status === "pending" || status === "idle" ? "Loading..." : "No data" }}
+    </template>
+  </UTable>
+</template>