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

feat: tab navigation

Browse Source
This commit is contained in:
Amir Adal
2025-05-27 21:26:29 +02:00
parent c5c55f72b1
commit e983719601
6 changed files with 186 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,24 @@
import { type FC } from "react";
import { useState, 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 { ChevronDown, ChevronRight } from "lucide-react";
import { ChevronRight } from "lucide-react";
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";
const IndexPage: FC = () => {
// console.log(overlay);
const [tab, setTab] = useState<string>("home");
return (
<div
className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(/dark-overlay.jpg)]`}
// 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:max-h-[calc(100vh-70px)] overflow-y-auto sm:min-h-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md">
<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" />
@ -28,102 +32,19 @@ const IndexPage: FC = () => {
{/* <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-col w-full items-center gap-2 dark:bg-black/70 bg-white/70 shadow-md shadow-gray-300 dark:shadow-gray-700">
<div className="flex flex-col items-center gap-2 p-7 pt-14">
<div className="w-24 h-24 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
{/* <User size={64} /> */}
<img
className="w-full h-full"
src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
alt="profile pic"
<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>
<h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
Amir Adal
</h1>
<div className="flex flex-row items-center gap-2 mr-[-10px] select-none">
<p className="text-gray-600 dark:text-gray-500">
qwer.009771@gmail.com
</p>
<div className="text-gray-600 dark:text-gray-500">
<ChevronDown size={18} />
</div>
</div>
</div>
<div className="flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar">
<div className="flex-shrink-0 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-4 border-b-blue-500 text-blue-500 cursor-pointer select-none whitespace-nowrap">
Home
</div>
<div className="flex-shrink-0 px-4 py-2 min-w-[140px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-0 text-gray-500 cursor-pointer select-none whitespace-nowrap">
Personal Info
</div>
<div className="flex-shrink-0 px-4 py-2 min-w-[180px] sm:min-w-0 sm:flex-1 flex items-center justify-center border-b-0 text-gray-500 cursor-pointer select-none whitespace-nowrap">
Data & Personalization
</div>
</div>
</div>
<div className="p-4">
<h1 className="dark:text-gray-200 text-gray-800 text-2xl">
Your profile info in Home services
</h1>
<p className="text-gray-500 text-sm mt-2">
Personal info and options to manage it. You can make some of
this info, like your contact details, visible to others so
they can reach you easily. You can also see a summary of your
profiles.
</p>
<div className="border dark:border-gray-800 border-gray-300 p-4 rounded mt-4">
<h3 className="dark:text-gray-300 text-gray-800">
Basic info
</h3>
<p className="text-gray-500 text-sm mt-2 mb-4">
Some info may be visible to other services and tools using
Home Guard.{" "}
<a href="#" className="text-blue-500">
Learn more
</a>
</p>
{/* Profile Picture */}
<div className="flex flex-row items-center justify-between px-2 p-4 border-b gap-2 dark:border-b-gray-800 border-b-gray-100">
<div className="flex flex-col items-start gap-2">
<p className="text-sm dark:text-gray-400 font-medium text-gray-600">
Profile picture
</p>
<p className="text-sm dark:text-gray-500 text-gray-600">
Add a profile picture to personalize your account
</p>
</div>
<div>
<div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
<img
className="w-full h-full"
src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
alt="profile pic"
/>
</div>
</div>
</div>
{/* Name */}
<div className="flex flex-row items-center justify-between px-2 p-4 border-b dark:border-b-gray-800 border-b-gray-100">
<div className="flex flex-col items-start gap-2">
<p className="text-sm dark:text-gray-400 font-medium text-gray-600">
Name
</p>
<p className="text dark:text-gray-200 text-gray-800">
Amir Adal
</p>
</div>
<div>
<div className="text-gray-500">
<ChevronRight size={26} />
</div>
</div>
<div className="p-4">
{tab === "personal-info" && <PersonalInfo />}
</div>
</div>
</div>