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

feat: location.pathname based bar navigation + admin layout + separate

Browse Source 
auth routes
This commit is contained in:
Amir Adal
2025-05-29 23:42:17 +02:00
parent 78e84567c7
commit db2cb36f54
14 changed files with 219 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,31 @@
import { useState, type FC } from "react";
import { Button } from "@/components/ui/button";
import Avatar from "@/feature/Avatar";
import { useAuth } from "@/store/auth";
import { type FC } from "react";
// import overlay from "@/assets/overlay.jpg";
// import darkOverlay from "@/assets/dark-overlay.jpg";
import { Card, CardContent } from "@/components/ui/card";
import Sidebar from "@/components/Home/Sidebar";
import TopBar from "@/components/Home/TopBar";
import Home from "@/components/Home/Tabs/Home";
import PersonalInfo from "@/components/Home/Tabs/PersonalInfo";
import ApiServices from "@/components/Home/Tabs/ApiServices";
const IndexPage: FC = () => {
const [tab, setTab] = useState<string>("home");
const profile = useAuth((state) => state.profile);
const signOut = useAuth((state) => state.signOut);
return (
<div className="relative z-10 flex items-center justify-center min-h-screen">
<Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
<div className="flex flex-col items-center sm:pt-0 relative">
<div className="flex flex-row items-center absolute left-4 top-4">
<img src="/icon.png" alt="icon" className="w-6 h-6" />
<div className="flex flex-col items-center gap-2 p-7">
<div className="w-24 h-24 sm:w-36 sm:h-36 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
<Avatar iconSize={64} />
</div>
<h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
Welcome, {profile?.full_name}
</h1>
<p className="text-gray-600 dark:text-gray-500 select-none text-center text-sm/normal sm:text-lg">
Manage your info, private and security to make Home Guard work better
for you.
</p>
<div className="ml-2">
<p className="text-sm text-gray-600 text-left dark:text-gray-500">
Home Guard
</p>
</div>
</div>
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
<CardContent className="w-full space-y-4 flex-1" spacing={false}>
<div className="flex flex-row">
<Sidebar activeTab={tab} onChangeTab={(tab) => setTab(tab)} />
<div className="sm:p-4 max-w-full flex-1">
<div className="flex flex-col w-full items-center gap-2">
<TopBar activeTab={tab} onChangeTab={(tab) => setTab(tab)} />
{tab === "home" && <Home />}
{/* {tab === "personal-info" && <PersonalInfo />} */}
</div>
<div className="p-4">
{tab === "personal-info" && <PersonalInfo />}
{tab === "api-services" && <ApiServices />}
</div>
</div>
</div>
</CardContent>
</div>
</Card>
<Button className="mt-10" onClick={signOut}>
Sign Out
</Button>
</div>
);
};