admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: account list

Browse Source
This commit is contained in:
Amir Adal
2025-05-24 14:31:16 +02:00
parent 92fda8cb24
commit accde2662f
2 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/pages/Index/index.tsx
View File

@ -1,22 +1,10 @@
import { useDbContext } from "@/context/db/db";
import { useAccountRepo, type LocalAccount } from "@/repository/account";
import { useEffect, useState, type FC } from "react";
import { type FC } from "react";
import overlay from "@/assets/overlay.jpg";
import { Card, CardContent } from "@/components/ui/card";
import { User } from "lucide-react";
import AccountList from "@/feature/AccountList";
const IndexPage: FC = () => {
const [accounts, setAccounts] = useState<LocalAccount[]>([]);
const repo = useAccountRepo();
const { connected } = useDbContext();
useEffect(() => {
if (connected) repo.loadAll().then(setAccounts);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [connected]);
return (
<div
className="relative min-h-screen bg-cover bg-center bg-white"
@ -24,7 +12,7 @@ const IndexPage: FC = () => {
>
<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 sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
<div className="flex flex-col items-center flex-5/6">
<img
src="/icon.png"
@ -45,22 +33,7 @@ const IndexPage: FC = () => {
{/* <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>
))}
<AccountList />
</CardContent>
</div>
</Card>