feat: render accounts saved in db

web/src/pages/Index/index.tsx

@@ -1,14 +1,72 @@
-import { useAccountRepo } from "@/repository/account";
+import { useDbContext } from "@/context/db/db";
-import { useEffect, type FC } from "react";
+import { useAccountRepo, type LocalAccount } from "@/repository/account";
+import { useEffect, useState, type FC } from "react";
+
+import overlay from "@/assets/overlay.jpg";
+import { Card, CardContent } from "@/components/ui/card";
+import { User } from "lucide-react";
 
 const IndexPage: FC = () => {
+  const [accounts, setAccounts] = useState<LocalAccount[]>([]);
+
   const repo = useAccountRepo();
+  const { connected } = useDbContext();
 
   useEffect(() => {
-    repo.loadAll().then((res) => console.log({ res }));
+    if (connected) repo.loadAll().then(setAccounts);
-  }, [repo]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connected]);
 
-  return <div></div>;
+  return (
+    <div
+      className="relative min-h-screen bg-cover bg-center bg-white"
+      style={{ backgroundImage: `url(${overlay})` }}
+    >
+      <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex sm:flex-row flex-col sm:items-start items-center pt-16 sm:pt-0">
+            <div className="flex flex-col items-center flex-5/6">
+              <img
+                src="/icon.png"
+                alt="icon"
+                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+              />
+
+              <div className="px-4 sm:mt-4 mt-8">
+                <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
+                  Select Account
+                </h2>
+                <h4 className="text-base mb-3 text-gray-400 text-left">
+                  Choose one of the accounts below in order to proceed to home
+                  lab services and tools.
+                </h4>
+              </div>
+            </div>
+
+            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
+            <CardContent className="w-full space-y-4">
+              {accounts.map((account) => (
+                <div
+                  key={account.accountId}
+                  className="flex flex-row items-center p-4 border-gray-200 border sm:border-l sm:border-r border-r-0 border-l-0 sm:rounded-xl select-none cursor-pointer hover:bg-gray-50 transition-colors mb-2"
+                >
+                  <div>
+                    <div className="rounded-full p-2 bg-gray-100 mr-3">
+                      <User />
+                    </div>
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="text-base">{account.label}</p>
+                    <p className="text-gray-500 text-sm">{account.email}</p>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default IndexPage;