feat: use api client for tool badge
Browse files
src/lib/components/ToolBadge.svelte
CHANGED
|
@@ -2,19 +2,22 @@
|
|
| 2 |
import ToolLogo from "./ToolLogo.svelte";
|
| 3 |
import { base } from "$app/paths";
|
| 4 |
import { browser } from "$app/environment";
|
|
|
|
| 5 |
|
| 6 |
interface Props {
|
| 7 |
toolId: string;
|
| 8 |
}
|
| 9 |
|
| 10 |
let { toolId }: Props = $props();
|
|
|
|
|
|
|
| 11 |
</script>
|
| 12 |
|
| 13 |
<div
|
| 14 |
class="relative flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
|
| 15 |
>
|
| 16 |
{#if browser}
|
| 17 |
-
{#await
|
| 18 |
{#key value.color + value.icon}
|
| 19 |
<ToolLogo color={value.color} icon={value.icon} size="sm" />
|
| 20 |
{/key}
|
|
|
|
| 2 |
import ToolLogo from "./ToolLogo.svelte";
|
| 3 |
import { base } from "$app/paths";
|
| 4 |
import { browser } from "$app/environment";
|
| 5 |
+
import { throwOnError, useAPIClient } from "$lib/APIClient";
|
| 6 |
|
| 7 |
interface Props {
|
| 8 |
toolId: string;
|
| 9 |
}
|
| 10 |
|
| 11 |
let { toolId }: Props = $props();
|
| 12 |
+
|
| 13 |
+
const client = useAPIClient();
|
| 14 |
</script>
|
| 15 |
|
| 16 |
<div
|
| 17 |
class="relative flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
|
| 18 |
>
|
| 19 |
{#if browser}
|
| 20 |
+
{#await client.tools({ id: toolId }).get().then(throwOnError) then value}
|
| 21 |
{#key value.color + value.icon}
|
| 22 |
<ToolLogo color={value.color} icon={value.icon} size="sm" />
|
| 23 |
{/key}
|