Compare commits
3 Commits
8e22a3ac05
...
c5c55f72b1
| Author | SHA1 | Date | |
|---|---|---|---|
| c5c55f72b1 | |||
| c445756296 | |||
| 0166e62e98 |
@ -3,16 +3,29 @@ import type { FC, ReactNode } from "react";
|
||||
interface ComponentProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
spacing?: boolean;
|
||||
}
|
||||
|
||||
export const Card: FC<ComponentProps> = ({ children, className }) => {
|
||||
return (
|
||||
<div className={`bg-white sm:rounded-lg shadow-md ${className || ""}`}>
|
||||
<div
|
||||
className={`bg-white sm:rounded-lg overflow-hidden shadow-md ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function CardContent({ children, className }: ComponentProps) {
|
||||
return <div className={`p-4 ${className || ""}`}>{children}</div>;
|
||||
export function CardContent({
|
||||
children,
|
||||
className,
|
||||
spacing = true,
|
||||
}: ComponentProps) {
|
||||
return (
|
||||
<div className={`${spacing ? "p-4 " : ""}${className || ""}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
@import "tailwindcss";
|
||||
|
||||
@layer utilities {
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Inter", Arial, Helvetica, sans-serif;
|
||||
|
||||
@ -4,7 +4,7 @@ import { type FC } from "react";
|
||||
// import darkOverlay from "@/assets/dark-overlay.jpg";
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import AccountList from "@/feature/AccountList";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
|
||||
const IndexPage: FC = () => {
|
||||
// console.log(overlay);
|
||||
@ -14,29 +14,119 @@ const IndexPage: FC = () => {
|
||||
// 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/65 dark:bg-black/65 backdrop-blur-md">
|
||||
<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-1">
|
||||
<img
|
||||
src="/icon.png"
|
||||
alt="icon"
|
||||
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
||||
/>
|
||||
<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">
|
||||
<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="px-4 sm:mt-4 mt-8">
|
||||
<h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
|
||||
Select Account
|
||||
</h2>
|
||||
<h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
|
||||
Choose one of the accounts below in order to proceed to home
|
||||
lab services and tools.
|
||||
</h4>
|
||||
<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">
|
||||
<AccountList />
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user