Merge pull request #459 from bounswe/FRONTEND-453

feat(frontend): reorganised profile page and added options to profile icon in navbar
bounswe · Nov 1, 2024 · e235106 · e235106
2 parents a05f9f9 + 5095025
commit e235106
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 73 deletions.
diff --git a/frontend/src/components/common/navbar.tsx b/frontend/src/components/common/navbar.tsx
@@ -1,9 +1,22 @@
-import { Avatar, Card, Input, Button } from "@nextui-org/react";
+import { Popover, PopoverTrigger, PopoverContent, Avatar, Card, Input, Button, Divider } from "@nextui-org/react";
 import { useNavigate, useLocation } from "react-router-dom";
 
 export default function Navbar() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
+  const username = "oktay_ozel";
+
+  const content = (
+    <PopoverContent>
+      <div className="px-2 pb-2">
+        <div className="text-medium font-semibold px-5 py-2">{username}</div>
+        <Divider className="w-full bg-zinc-300" />
+        <div className="text-medium pt-2">Edit Profile</div>
+        <div className="text-medium">Log Out</div>
+      </div>
+    </PopoverContent>
+  );
+
   return (
     <div className="w-screen p-2 shadow-none">
       <Card className="flex flex-row w-full px-5 py-3 rounded-full shadow-md">
@@ -48,13 +61,18 @@ export default function Navbar() {
           </div>
         </div>
         <div className="flex-1 flex justify-end items-center">
-          <button onClick={() => navigate("/profile/oktay_ozel")}>
-            <Avatar
-              isBordered
-              color="success"
-              src="https://nextui.org/avatars/avatar-1.png"
-            />
-          </button>
+          <Popover key="bottom-end" placement="bottom-end">
+            <PopoverTrigger>
+              <button onClick={() => navigate("/profile/oktay_ozel")}>
+                <Avatar
+                  isBordered
+                  color="success"
+                  src="https://nextui.org/avatars/avatar-1.png"
+                />
+              </button>
+            </PopoverTrigger>
+            {content}
+          </Popover>
         </div>
       </Card>
     </div>

diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
@@ -1,11 +1,17 @@
 import Navbar from "../components/common/navbar.tsx";
-import { Avatar, Button, Divider, Card } from "@nextui-org/react";
+import { Tabs, Tab, Avatar, Button, Divider, Card } from "@nextui-org/react";
 import { Suspense, useState, useEffect } from "react";
 import PostCard from "../components/post/post-card.tsx";
 import PostCardSkeleton from "../components/post/post-card-skeleton.tsx";
 import axios from "axios";
 import { BASE_URL } from "../lib/baseURL";
 import type { Profile } from "../types.ts";
+import {
+  IconBookmark,
+  IconSquareRoundedCheck,
+  IconBorderAll,
+  IconClipboardText,
+} from "@tabler/icons-react";
 
 export default function Profile() {
   const [activeSection, setActiveSection] = useState("posts");
@@ -39,75 +45,95 @@ export default function Profile() {
               <p className="text-gray-500">@{profile.level}</p>
             </div>
           </div>
-          <Button
-            variant="light"
-            className="border-2 rounded-lg font-bold text-blue-900 px-8 py-6 "
-          >
-            {profile.following} Following
-          </Button>
-          <Button
-            variant="light"
-            className="border-2 rounded-lg font-bold text-blue-900 px-8 py-6 "
-          >
-            {profile.followers} Followers
-          </Button>
-          <Button
-            variant="light"
-            className="border-2 rounded-lg font-bold text-blue-900 px-8 py-6 "
-          >
-            Solved Quizzes
-          </Button>
+          <div className="flex flex-row pl-36 gap-6">
+            <Button
+              variant="light"
+              className="border-2 rounded-lg font-bold text-blue-900 px-8 py-6 "
+            >
+              {profile.following} Following
+            </Button>
+            <Button
+              variant="light"
+              className="border-2 rounded-lg font-bold text-blue-900 px-8 py-6 "
+            >
+              {profile.followers} Followers
+            </Button>
+          </div>
         </div>
       )}
       <Divider className="my-4 w-1/2 border-t-4 p-[0.75px] rounded-2xl border-gray-400" />
-      <Card className="border-1 border-blue-900 items-center py-2 shadow-small mx-auto my-3">
-        <div className="flex flex-row w-full justify-between items-center">
-          <Button
-            variant="light"
-            className={`text-blue-900 opacity-90 font-semibold text-lg bg-white mx-4 h-full  ${
-              activeSection === "quizzes" ? "font-bold opacity-100" : ""
-            }`}
-            onClick={() => setActiveSection("quizzes")}
+      <div className="flex w-full flex-col items-center">
+        <Tabs aria-label="Options">
+          <Tab
+            key="quiz"
+            title={
+              <div className="flex items-center space-x-2">
+                <IconClipboardText size={20} stroke={1.5} />
+                <span>Quizzes</span>
+              </div>
+            }
           >
-            Quizzes
-          </Button>
-          <p className="text-blue-900 font-bold bg-white rounded-md mx-2">|</p>
-          <Button
-            variant="light"
-            className={`text-blue-900 opacity-90 font-semibold text-lg bg-white mx-4 h-full ${
-              activeSection === "posts" ? "font-bold opacity-100" : ""
-            }`}
-            onClick={() => setActiveSection("posts")}
+            <p>Quizzes</p>
+          </Tab>
+          <Tab
+            key="post"
+            title={
+              <div className="flex items-center space-x-2">
+                <IconBorderAll size={20} stroke={1.5} />
+                <span>Posts</span>
+              </div>
+            }
           >
-            Posts
-          </Button>
-        </div>
-      </Card>
-      {profile && (
-        <div className="flex flex-col p-5 items-center">
-          {activeSection === "quizzes" ? (
-            <div className="p-5">
-            </div>
-          ) : (
-            <div className="flex flex-col gap-4 items-center">
-              {profile &&
-                profile.posts.map((post) => (
-                  <Suspense key={post.id} fallback={<PostCardSkeleton />}>
-                    <PostCard
-                      key={post.id}
-                      id={post.id}
-                      username={post.author.username}
-                      content={post.post.content}
-                      timePassed={post.post.timestamp}
-                      likeCount={post.engagement.likes}
-                      tags={post.post.tags} // if exists
-                    />
-                  </Suspense>
-                ))}
-            </div>
-          )}
-        </div>
-      )}
+            {profile && (
+              <div className="flex flex-col p-5 items-center">
+                {activeSection === "quizzes" ? (
+                  <div className="p-5">
+                  </div>
+                ) : (
+                  <div className="flex flex-col gap-4 items-center">
+                    {profile &&
+                      profile.posts.map((post) => (
+                        <Suspense key={post.id} fallback={<PostCardSkeleton />}>
+                          <PostCard
+                            key={post.id}
+                            id={post.id}
+                            username={post.author.username}
+                            content={post.post.content}
+                            timePassed={post.post.timestamp}
+                            likeCount={post.engagement.likes}
+                            tags={post.post.tags} // if exists
+                          />
+                        </Suspense>
+                      ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </Tab>
+          <Tab
+            key="solved"
+            title={
+              <div className="flex items-center space-x-2">
+                <IconSquareRoundedCheck size={20} stroke={1.5} />
+                <span>Solved</span>
+              </div>
+            }
+          >
+            <p>Solved</p>
+          </Tab>
+          <Tab
+            key="saved"
+            title={
+              <div className="flex items-center space-x-2">
+                <IconBookmark size={20} stroke={1.5} />
+                <span>Saved</span>
+              </div>
+            }
+          >
+            <p>Saved</p>
+          </Tab>
+        </Tabs>
+      </div>
     </div>
   );
 }