feat: tab navigation

web/src/components/Home/Tabs/PersonalInfo.tsx

@@ -0,0 +1,66 @@
+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">
+              <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>
+    </>
+  );
+};
+
+export default PersonalInfo;