mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
93 lines
4.8 KiB
Handlebars
93 lines
4.8 KiB
Handlebars
{{#if (eq backend "convex")}}
|
|
<script lang="ts">
|
|
import { useQuery } from 'convex-svelte';
|
|
import { api } from "@{{projectName}}/backend/convex/_generated/api";
|
|
|
|
const healthCheck = useQuery(api.healthCheck.get, {});
|
|
|
|
const TITLE_TEXT = `
|
|
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
|
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
|
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
|
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
|
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
|
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
|
|
|
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
|
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
|
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
|
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
|
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
|
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
|
`;
|
|
</script>
|
|
|
|
<div class="container mx-auto max-w-3xl px-4 py-2">
|
|
<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
|
<div class="grid gap-6">
|
|
<section class="rounded-lg border p-4">
|
|
<h2 class="mb-2 font-medium">API Status</h2>
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
|
></div>
|
|
<span class="text-muted-foreground text-sm">
|
|
{healthCheck.isLoading
|
|
? "Checking..."
|
|
: healthCheck.data
|
|
? "Connected"
|
|
: "Disconnected"}
|
|
</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<script lang="ts">
|
|
{{#if (eq api "orpc")}}
|
|
import { orpc } from "$lib/orpc";
|
|
import { createQuery } from "@tanstack/svelte-query";
|
|
const healthCheck = createQuery(orpc.healthCheck.queryOptions());
|
|
{{/if}}
|
|
|
|
const TITLE_TEXT = `
|
|
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
|
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
|
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
|
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
|
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
|
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
|
|
|
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
|
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
|
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
|
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
|
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
|
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
|
`;
|
|
</script>
|
|
|
|
<div class="container mx-auto max-w-3xl px-4 py-2">
|
|
<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
|
<div class="grid gap-6">
|
|
{{#if (eq api "orpc")}}
|
|
<section class="rounded-lg border p-4">
|
|
<h2 class="mb-2 font-medium">API Status</h2>
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
|
></div>
|
|
<span class="text-muted-foreground text-sm">
|
|
{$healthCheck.isLoading
|
|
? "Checking..."
|
|
: $healthCheck.data
|
|
? "Connected"
|
|
: "Disconnected"}
|
|
</span>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|