pip page done

wizelineacademy · Apr 8, 2024 · a0913fe · a0913fe
1 parent 91628ff
commit a0913fe
Show file tree

Hide file tree

Showing 11 changed files with 338 additions and 35 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --primary: #6640d5;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--primary);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4d31a1;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #4d31a1;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,6 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   // if the current route is login or register, we don't want to show the nav bar
-
   return (
     <ClerkProvider>
       <html lang="en">

diff --git a/app/pip/page.tsx b/app/pip/page.tsx
@@ -1,9 +1,137 @@
 import NavigationBar from "@/components/NavigationBar";
+import PipResource from "@/components/PipResource";
+import PipTask from "@/components/PipTask";
+import ProgressBar from "@/components/Progressbar";
 
 const PIP = () => {
+  const tasks = [
+    {
+      id: 1,
+      title: "Ir con el psicólogo",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: false,
+    },
+    {
+      id: 2,
+      title: "Task 2",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: true,
+    },
+    {
+      id: 3,
+      title: "Task 3",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: true,
+    },
+    {
+      id: 4,
+      title: "Task 4",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: false,
+    },
+    {
+      id: 3,
+      title: "Task 3",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: true,
+    },
+    {
+      id: 4,
+      title: "Ir con el psicólogo",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: false,
+    },
+    {
+      id: 3,
+      title: "Task 3",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: true,
+    },
+    {
+      id: 4,
+      title: "Task 4",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: false,
+    },
+    {
+      id: 3,
+      title: "Ir con el psicólogo",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: true,
+    },
+    {
+      id: 4,
+      title: "Task 4",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      isDone: false,
+    },
+  ];
+
+  const resources = [
+    {
+      id: 1,
+      title: "Hábitos Atómicos",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor...",
+      type: "video",
+      link: "https://www.youtube.com",
+    },
+    {
+      id: 2,
+      title: "Resource 2",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      type: "article",
+      link: "https://www.youtube.com",
+    },
+    {
+      id: 3,
+      title: "Resource 3",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      type: "book",
+      link: "https://www.youtube.com",
+    },
+  ];
+
+  const progressPercentage = Math.round(
+    (tasks.filter((task) => task.isDone).length / tasks.length) * 100,
+  );
+
   return (
-    <main>
+    <main className="overflow-y-hidden">
       <NavigationBar />
+      <section id="pip-progressbar" className="mt-4 px-7">
+        <p className=" mb-2 text-3xl font-semibold">
+          Performance Improvement Plan
+        </p>
+        <ProgressBar width={progressPercentage} height={6} />
+      </section>
+      <section id="pip-tasks" className="mt-9 w-full px-7">
+        <p className="text-3xl font-medium">Tasks</p>
+        <div className="flew-wrap mb-10 mt-2 flex w-full flex-row gap-12 overflow-x-auto pb-3">
+          {tasks.map((task, index) => (
+            <PipTask
+              title={task.title}
+              description={task.description}
+              isDone={task.isDone}
+              key={index}
+            />
+          ))}
+        </div>
+      </section>
+      <section id="pip-resources" className="mt-9 w-full px-7">
+        <p className="text-3xl font-medium">Resources</p>
+        <div className="flew-wrap mb-10 mt-2 flex w-full flex-row gap-12 overflow-x-auto pb-3">
+          {resources.map((task, index) => (
+            <PipResource
+              title={task.title}
+              description={task.description}
+              key={index}
+              type={task.type}
+              link={task.title}
+            />
+          ))}
+        </div>
+      </section>
     </main>
   );
 };

diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { usePathname } from "next/navigation";
-import PIPIcon from "./PIPIcon";
+import PIPIcon from "./icons/PIPIcon";
 import DashboardIcon from "./DashboardIcon";
 import UserIcon from "./UserIcon";
 import SearchBar from "./SearchBar";

diff --git a/components/PIPIcon.tsx b/components/PIPIcon.tsx
diff --git a/components/PipResource.tsx b/components/PipResource.tsx
@@ -0,0 +1,60 @@
+import ArticleIcon from "./icons/ArticleIcon";
+import BookIcon from "./icons/BookIcon";
+import VideoIcon from "./icons/VideoIcon";
+
+interface InterfacePipResource {
+  title: string;
+  description: string;
+  type: string;
+  link: string;
+}
+
+const PipResource = ({
+  title,
+  description,
+  type,
+  link,
+}: InterfacePipResource) => {
+  const renderIcon = () => {
+    switch (type) {
+      case "video":
+        return <VideoIcon size="h-10 w-10" color="text-primary" />;
+      case "book":
+        return <BookIcon size="h-10 w-10" color="text-primary" />;
+      case "article":
+        return <ArticleIcon size="h-10 w-10" color="text-primary" />;
+      default:
+        return <ArticleIcon size="h-10 w-10" color="text-primary" />;
+    }
+  };
+
+  const renderButtonLabel = () => {
+    switch (type) {
+      case "video":
+        return "Watch it";
+      case "book":
+        return "Get it";
+      case "article":
+        return "Read it";
+      default:
+        return "Read it";
+    }
+  };
+
+  return (
+    <div className="box-border flex h-48 w-52 shrink-0 flex-col rounded-xl bg-white p-3 shadow-lg">
+      <header className="flex items-center">
+        {renderIcon()}
+        <p className="text-md ms-3 text-wrap font-semibold">{title}</p>
+      </header>
+      <p className="font-regular mb-2 mt-3 h-full overflow-hidden text-ellipsis text-xs  text-[#9E9E9E]">
+        {description}
+      </p>
+      <button className="mx-auto w-fit rounded-full bg-primary px-7 py-1 text-xs font-medium text-white">
+        <a href={link}>{renderButtonLabel()}</a>
+      </button>
+    </div>
+  );
+};
+
+export default PipResource;
diff --git a/components/PipTask.tsx b/components/PipTask.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { useState } from "react";
+
+interface InterfacePipTask {
+  title: string;
+  description: string;
+  isDone: boolean;
+}
+
+const PipTask = ({ title, description, isDone }: InterfacePipTask) => {
+  const [done, setIsDone] = useState<boolean>(isDone);
+  const handleDone = () => {
+    setIsDone(!done);
+  };
+  return (
+    <div className="box-border h-48 w-52 shrink-0 rounded-xl bg-white px-2 py-9 shadow-lg">
+      <header className="flex items-center">
+        <p className="text-md text-wrap font-semibold">{title}</p>
+        <div className="ml-auto inline-flex items-center">
+          <label
+            className="relative flex cursor-pointer items-center"
+            htmlFor="checkbox-pip-input"
+          >
+            <input
+              type="checkbox"
+              className="h-6 w-6 cursor-pointer appearance-none rounded-full border border-primary border-primary/80 bg-primary-light/20 outline-primary transition-all checked:bg-primary checked:before:bg-primary hover:scale-105"
+              id="checkbox-pip-input"
+            />
+          </label>
+        </div>
+      </header>
+      <p className="font-regular mt-2 text-ellipsis text-wrap text-xs text-[#9E9E9E]">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+export default PipTask;
diff --git a/components/Progressbar.tsx b/components/Progressbar.tsx
@@ -0,0 +1,17 @@
+interface InterfaceProgressBar {
+  width: number; // percentage
+  height: number; // height in talwindcss
+}
+
+const ProgressBar = ({ width, height }: InterfaceProgressBar) => {
+  return (
+    <div className="w-100 rounded-full bg-gray-200 p-1.5">
+      <div
+        className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary`}
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/components/icons/ArticleIcon.tsx b/components/icons/ArticleIcon.tsx
@@ -0,0 +1,23 @@
+interface InterfaceArticle {
+  size: string;
+  color: string;
+}
+
+const ArticleIcon = ({ size, color }: InterfaceArticle) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={`${color} ${size}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"
+    />
+  </svg>
+);
+
+export default ArticleIcon;
diff --git a/components/icons/BookIcon.tsx b/components/icons/BookIcon.tsx
@@ -0,0 +1,22 @@
+interface InterfaceBookIcon {
+  color: string;
+  size: string;
+}
+const BookIcon = ({ color, size }: InterfaceBookIcon) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={`${size} ${color}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+    />
+  </svg>
+);
+
+export default BookIcon;