chore: profile page

src/components/Login/account-dropdown.tsx

@@ -6,7 +6,7 @@ export default function AccountDropdown() {
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    // If dropdown is open, close it.
+    // If user click outside the dropdown, and dropdown is open then close it.
     const handleOpen = () => {
       if (isOpen) setIsOpen(false);
     };

src/components/Profile/profile-details.tsx

@@ -0,0 +1,45 @@
+import { useAuth } from '../../hooks/use-auth';
+
+export default function ProfileDetails() {
+  const { user, isLoading } = useAuth();
+  return (
+    <div className="py-10 pb-20">
+      <h1 className="text-3xl font-bold sm:text-4xl">Profile</h1>
+      <p className="mt-2">Here you can view your profile details.</p>
+      <div className="mt-5 space-y-4">
+        <div>
+          <label className="text-slate-500">Name</label>
+          <div className="mt-1">
+            {isLoading || !user ? (
+              <Skeleton />
+            ) : (
+              <h2 className="text-xl font-medium text-slate-800">
+                {user?.name}
+              </h2>
+            )}
+          </div>
+        </div>
+        <div>
+          <label className="text-slate-500">Email</label>
+          <div className="mt-1">
+            {isLoading || !user ? (
+              <Skeleton className="w-64" />
+            ) : (
+              <h2 className="text-xl font-medium text-slate-800">
+                {user?.email}
+              </h2>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Skeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={`h-7 w-36 animate-pulse rounded-md bg-slate-100 ${className}`}
+    />
+  );
+}

src/pages/profile/index.astro

@@ -0,0 +1,10 @@
+---
+import ProfileDetails from '../../components/Profile/profile-details';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="Profile">
+  <div class="container">
+    <ProfileDetails client:idle />
+  </div>
+</BaseLayout>