Reorganise code - use src folder

src/providers/TrpcProvider.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { getFetch, httpBatchLink, loggerLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { trpc } from "@/utils/trpc";
+
+export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 5000 } },
+      }),
+  );
+
+  const url = "/api/trpc";
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        loggerLink({
+          enabled: () => true,
+        }),
+        httpBatchLink({
+          url,
+          fetch: async (input, init?) => {
+            const fetch = getFetch();
+            return fetch(input, {
+              ...init,
+              credentials: "include",
+            });
+          },
+        }),
+      ],
+      transformer: superjson,
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+};

src/providers/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Provider } from "jotai";
+
+import { useDynamicViewportUnits } from "@/hooks/useDynamicViewportUnits";
+
+import { TrpcProvider } from "./TrpcProvider";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  useDynamicViewportUnits();
+  return (
+    <Provider>
+      <TrpcProvider>{children}</TrpcProvider>
+    </Provider>
+  );
+}