Solved Profile View

wizelineacademy · Apr 9, 2024 · b7debea · b7debea
1 parent a45a557
commit b7debea
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 1,654 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.embla {
+    overflow: hidden;
+}
+
+.embla__container {
+    display: flex;
+}
+
+.embla__slide__coworker {
+    flex: 0 0 20%;
+    min-width: 0;
+}
+
+.embla__slide__project {
+    flex: 0 0 35%;
+    min-width: 0;
+    padding: 0 20px;
+    /* padding: 0 16px 0 0; */
+    /* min-width: 200px; */
+    /* max-width: 220px; */
+    /* padding: 0 14px; */
+}
+
+.clip-bottom {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -1,5 +1,9 @@
 import NavigationBar from "@/components/NavigationBar";
 import UserProfileButton from "@/components/UserProfileButton";
+import CoWorkersCarousel from "@/components/CoWorkersCarousel";
+import ProjectsCarousel from "@/components/ProjectsCarousel";
+import Tooltip from "@/components/Tooltip";
+import Badge from "@/components/Badge";
 import Image from "next/image";
 import JobSVG from "@/public/Job-Profile-Image.svg";
 
@@ -8,18 +12,35 @@ 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 />
-      <section className="mx-auto mt-6 flex h-52 w-[95%] rounded-xl bg-primary">
+      {/* Banner */}
+      <section className="mx-auto mb-24 mt-6 flex h-52 w-[95%] rounded-xl bg-primary">
         <UserProfileButton
           size="lg"
           className="absolute left-20 top-60 h-fit"
           photoUrl="https://static.wikia.nocookie.net/heroe/images/0/08/Lucario_SSBU.png/revision/latest?cb=20200104023610&path-prefix=es"
         />
         <div className="flex w-5/6 flex-row items-center justify-between">
           <div className="ps-56 leading-tight text-white">
-            <p className=" text-3xl font-semibold">{userName}</p>
+            <h2 className=" text-3xl font-semibold">{userName}</h2>
             <div className="flex flex-row items-center gap-2 text-xl">
               <p className="font-medium">{userRole}</p>
               <p className="font-normal">-</p>
@@ -30,6 +51,68 @@ const Profile = () => {
           <Image src={JobSVG} alt="image" className="hidden md:block" />
         </div>
       </section>
+
+      {/* Data */}
+      <section className="mx-auto flex w-[95%] justify-between space-x-10">
+        <div className="w-7/12">
+          {/* Co-workers */}
+          <div className="mb-6">
+            <div className="mx-auto flex justify-between">
+              <h3 className="text-2xl font-medium">Co-workers</h3>
+              <p className="cursor-pointer self-center text-sm text-grayText">
+                Show More
+              </p>
+            </div>
+            <div className="mt-2">
+              <CoWorkersCarousel />
+            </div>
+          </div>
+          {/* Projects */}
+          <div>
+            <div className="mx-auto flex justify-between">
+              <h3 className="text-2xl font-medium">Projects</h3>
+              <p className="cursor-pointer self-center text-sm text-grayText">
+                Show More
+              </p>
+            </div>
+            <div className="mt-2 flex gap-4">
+              <ProjectsCarousel />
+              {/* <ProjectCard /> */}
+            </div>
+          </div>
+        </div>
+
+        <div className="w-5/12">
+          {/* Strenghts */}
+          <div className="mx-auto flex justify-between">
+            <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="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>
     </main>
   );
 };

diff --git a/components/Badge.tsx b/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>
+  );
+}
diff --git a/components/CoWorkersCarousel.tsx b/components/CoWorkersCarousel.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import UserProfileButton from "@/components/UserProfileButton";
+import Autoplay from "embla-carousel-autoplay";
+
+export default function EmblaCarousel() {
+  const [emblaRef] = useEmblaCarousel({ loop: true }, [
+    Autoplay({ delay: 2000 }),
+  ]);
+
+  return (
+    <div className="embla" ref={emblaRef}>
+      <ul className="embla__container px-1 py-3">
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+        <li className="embla__slide__coworker">
+          <UserProfileButton size="md" />
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import UserProfileButton from "@/components/UserProfileButton";
+
+export default function ProjectCard() {
+  return (
+    <div className="flex items-center gap-20 rounded-lg bg-white p-4">
+      <div>
+        <h3 className="pb-2 text-lg font-medium">Project 1</h3>
+        <p className="pb-4 text-sm text-grayText">In progress</p>
+        <div className="ml-[6px]">
+          <UserProfileButton size="xs" className="mx-[-6px]" />
+          <UserProfileButton size="xs" className="mx-[-6px]" />
+          <UserProfileButton size="xs" className="mx-[-6px]" />
+          <button
+            disabled
+            className={
+              "group mx-[-6px] rounded-full bg-white p-2 text-primary drop-shadow-lg"
+            }
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2.5}
+              stroke="currentColor"
+              className="h-4 w-4"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 4.5v15m7.5-7.5h-15"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <button className="flex h-9 w-9 items-center justify-center rounded-full bg-primary">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={2.5}
+          stroke="white"
+          className="h-6 w-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m8.25 4.5 7.5 7.5-7.5 7.5"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/components/ProjectsCarousel.tsx b/components/ProjectsCarousel.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import ProjectCard from "@/components/ProjectCard";
+import Autoplay from "embla-carousel-autoplay";
+
+export default function EmblaCarousel() {
+  const [emblaRef] = useEmblaCarousel({ loop: true }, []);
+
+  return (
+    <div className="embla" ref={emblaRef}>
+      <ul className="embla__container">
+        <li className="embla__slide__project">
+          <ProjectCard />
+        </li>
+        <li className="embla__slide__project">
+          <ProjectCard />
+        </li>
+        <li className="embla__slide__project">
+          <ProjectCard />
+        </li>
+        <li className="embla__slide__project">
+          <ProjectCard />
+        </li>
+        <li className="embla__slide__project">
+          <ProjectCard />
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/components/Tooltip.tsx b/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>
+  );
+}
diff --git a/components/UserProfileButton.tsx b/components/UserProfileButton.tsx
@@ -1,9 +1,10 @@
 import Image from "next/image";
+import Link from "next/link";
 
 interface UserProfileButtonProps {
   name?: string;
   photoUrl?: string;
-  size?: "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg";
   className?: string;
 }
 
@@ -14,6 +15,7 @@ const UserProfileButton = ({
   className,
 }: UserProfileButtonProps) => {
   const sizes = {
+    xs: "h-4 w-4",
     sm: "h-10 w-10",
     md: "h-20 w-20",
     lg: "h-32 w-32",