Added Strengths and Opotunity Areas

app/globals.css

@@ -23,4 +23,8 @@
     /* min-width: 200px; */
     /* max-width: 220px; */
     /* padding: 0 14px; */
+}
+
+.clip-bottom {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
 }

app/profile/page.tsx

@@ -2,7 +2,8 @@ import NavigationBar from "@/components/NavigationBar";
 import UserProfileButton from "@/components/UserProfileButton";
 import CoWorkersCarousel from "@/components/CoWorkersCarousel";
 import ProjectsCarousel from "@/components/ProjectsCarousel";
-import ProjectCard from "@/components/ProjectCard";
+import Tooltip from "@/components/Tooltip";
+import Badge from "@/components/Badge";
 import Image from "next/image";
 import JobSVG from "@/public/Job-Profile-Image.svg";
 
@@ -11,6 +12,22 @@ const Profile = () => {
   const userEmail = "[email protected]";
   const userRole = "Software Engineer";
   const userDepartment = "IT Department";
+
+  const Strengths = [
+    "Detail Attention",
+    "Good Communication",
+    "Punctuallity",
+    "Creative",
+    "Discipline",
+    "Proactive",
+  ];
+  const oportunityAreas = [
+    "Lack of Communication",
+    "Ineffective Time Management",
+    "Bad Work Team",
+    "Procrastination",
+  ];
+
   return (
     <main className=" h-dvh w-dvw overflow-hidden">
       <NavigationBar />
@@ -42,7 +59,9 @@ const Profile = () => {
           <div className="mb-6">
             <div className="mx-auto flex justify-between">
               <h3 className="text-2xl font-medium">Co-workers</h3>
-              <p className="self-center text-sm text-grayText">Show More</p>
+              <p className="cursor-pointer self-center text-sm text-grayText">
+                Show More
+              </p>
             </div>
             <div className="mt-2">
               <CoWorkersCarousel />
@@ -66,13 +85,31 @@ const Profile = () => {
         <div className="w-5/12">
           {/* Strenghts */}
           <div className="mx-auto flex justify-between">
-            <h3 className="text-2xl font-medium">Strenghs</h3>
-            <p className="self-center text-sm text-grayText">Show More</p>
+            <h3 className="text-2xl font-medium">Strengths</h3>
+            <p className="cursor-pointer self-center text-sm text-grayText">
+              Show More
+            </p>
+          </div>
+          <div className="mb-10 mt-5 flex flex-wrap gap-5">
+            {Strengths.map((strength, index) => (
+              <Tooltip message="Lorem ipsum dolor sit amet" key={index}>
+                <Badge text={strength} />
+              </Tooltip>
+            ))}
           </div>
           {/* Oportunity Areas */}
           <div className="mx-auto flex justify-between">
             <h3 className="text-2xl font-medium">Oportunity Areas</h3>
-            <p className="self-center text-sm text-grayText">Show More</p>
+            <p className="cursor-pointer self-center text-sm text-grayText">
+              Show More
+            </p>
+          </div>
+          <div className="mb-10 mt-5 flex flex-wrap gap-5">
+            {oportunityAreas.map((area, index) => (
+              <Tooltip message="Lorem ipsum dolor sit amet" key={index}>
+                <Badge text={area} />
+              </Tooltip>
+            ))}
           </div>
         </div>
       </section>

components/Badge.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface BadgeProps {
+  text: string;
+}
+
+export default function Badge({ text }: BadgeProps) {
+  return (
+    <div className="w-fit rounded-xl bg-white px-3 py-2 text-sm drop-shadow-lg">
+      <p>{text}</p>
+    </div>
+  );
+}

components/Tooltip.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface TooltipProps {
+  message: string;
+  children: React.ReactNode;
+}
+
+export default function Tooltip({ message, children }: TooltipProps) {
+  return (
+    <div className="group relative flex max-w-max flex-col items-center justify-center">
+      {children}
+      <div className="absolute bottom-7 left-1/2 z-10 ml-auto mr-auto min-w-max -translate-x-1/2 rotate-180 scale-0 transform rounded-xl px-3 py-2 text-xs font-medium transition-all duration-500 group-hover:scale-100">
+        <div className="flex max-w-xs flex-col items-center shadow-lg">
+          <div className="clip-bottom h-2 w-4 bg-primary/90"></div>
+          <div className="w-[25ch] rotate-180 rounded bg-primary/90 p-2 text-center text-xs text-white">
+            {message}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}