64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import Avatar from "@/feature/Avatar";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { type FC } from "react";
|
|
|
|
const PersonalInfo: FC = () => {
|
|
return (
|
|
<>
|
|
<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 sm:text-lg">
|
|
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">
|
|
<Avatar iconSize={12} />
|
|
</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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PersonalInfo;
|