From eaec8d70f7e4523777a209a5624bc4cf859f6b2f Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 31 Mar 2023 05:21:25 +0600
Subject: [PATCH] chore: profile page

---
 src/components/Login/account-dropdown.tsx  |  2 +-
 src/components/Profile/profile-details.tsx | 45 ++++++++++++++++++++++
 src/pages/profile/index.astro              | 10 +++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Profile/profile-details.tsx
 create mode 100644 src/pages/profile/index.astro

diff --git a/src/components/Login/account-dropdown.tsx b/src/components/Login/account-dropdown.tsx
index 5e5cb2fb7..30b1889a5 100644
--- a/src/components/Login/account-dropdown.tsx
+++ b/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);
     };
diff --git a/src/components/Profile/profile-details.tsx b/src/components/Profile/profile-details.tsx
new file mode 100644
index 000000000..06a48ebb6
--- /dev/null
+++ b/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}`}
+    />
+  );
+}
diff --git a/src/pages/profile/index.astro b/src/pages/profile/index.astro
new file mode 100644
index 000000000..e12b5b4b1
--- /dev/null
+++ b/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>