feat(poc): Add in current PoC to the repo that will be used by Vercel

app/clouds/layout.tsx

@@ -0,0 +1,13 @@
+export default function CloudsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
+    </section>
+  );
+}

app/clouds/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import useSWR from "swr";
+
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableColumn,
+  TableRow,
+  TableCell,
+} from "@nextui-org/table";
+import { fetcher } from "@/utils/fetcher";
+import { title } from "@/components/primitives";
+
+export default function CloudsPage() {
+  const { data, error } = useSWR(
+    `http://localhost:8080/api/v1/providers/aws/accounts`,
+    fetcher,
+  );
+
+  // TODO FIX TYPE CHECKING
+  const rowItems = data?.map((row: any) => (
+    <TableRow key={row.id}>
+      <TableCell>{row.account_id}</TableCell>
+      <TableCell>{row.alias}</TableCell>
+      <TableCell>{row.connected ? "True" : "False"}</TableCell>
+    </TableRow>
+  ));
+
+  return (
+    <div>
+      <h1 className={title()}>Cloud Accounts</h1>
+      <p className="mt-10 text-left">
+        {error && <span className="text-red-400">Failed to load</span>}
+        {!data && <span className="text-yellow-400">Loading</span>}
+      </p>
+      {data && (
+        <Table aria-label="cloud accounts table" className="text-left mt-10">
+          <TableHeader>
+            <TableColumn>ACCOUNT ID</TableColumn>
+            <TableColumn>ALIAS</TableColumn>
+            <TableColumn>CONNECTED</TableColumn>
+          </TableHeader>
+          <TableBody>{rowItems}</TableBody>
+        </Table>
+      )}
+      <p className="mt-24">This is a page with "use client", useSWR</p>
+    </div>
+  );
+}