feat: prettier tailwind

client/src/lib/transport.ts

@@ -0,0 +1,26 @@
+import { createConnectTransport } from "@connectrpc/connect-web"
+import { Code, ConnectError, createClient } from "@connectrpc/connect"
+import { AuthService } from "$lib/services/user/v1/auth_pb";
+import { UserService } from "$lib/services/user/v1/user_pb";
+import type { Interceptor } from "@connectrpc/connect";
+import { goto } from "$app/navigation";
+
+const redirector: Interceptor = (next) => async (req) => {
+    try {
+        return await next(req);
+    } catch (e) {
+        const error = ConnectError.from(e);
+        if (error.code === Code.Unauthenticated) {
+            await goto('/auth');
+        }
+        throw e;
+    }
+};
+
+const transport = createConnectTransport({
+    baseUrl: `${window.location.origin}/grpc`,
+    interceptors: [redirector],
+});
+
+export const AuthClient = createClient(AuthService, transport);
+export const UserClient = createClient(UserService, transport);

client/src/routes/+page.svelte

@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<h1>Welcome to TrevStack</h1>
+<p>Visit <a href="https://github.com/spotdemo4/trevstack">github.com/spotdemo4/trevstack</a> to read the documentation</p>

client/src/routes/auth/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Tabs } from 'bits-ui';
+</script>
+
+<div class="pt-6">
+	<Tabs.Root
+		value="outbound"
+		class="rounded-card border-muted bg-background-alt shadow-card w-[390px] border p-3"
+	>
+		<Tabs.List
+			class="rounded-9px bg-dark-10 shadow-mini-inset dark:bg-background grid w-full grid-cols-2 gap-1 p-1 text-sm font-semibold leading-[0.01em] dark:border dark:border-neutral-600/30"
+		>
+			<Tabs.Trigger
+				value="outbound"
+				class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
+			>
+				Outbound
+			</Tabs.Trigger>
+			<Tabs.Trigger
+				value="inbound"
+				class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
+			>
+				Inbound
+			</Tabs.Trigger>
+		</Tabs.List>
+		<Tabs.Content value="outbound" class="select-none pt-3">Test1</Tabs.Content>
+		<Tabs.Content value="inbound" class="select-none pt-3">Test2</Tabs.Content>
+	</Tabs.Root>
+</div>