From a0913feec104243f5cd4b5511469773783736ba3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Carlos=20S=C3=A1nchez?= Date: Mon, 8 Apr 2024 15:06:23 -0600 Subject: [PATCH] pip page done --- app/globals.css | 22 ++++++ app/layout.tsx | 1 - app/pip/page.tsx | 130 ++++++++++++++++++++++++++++++- components/NavigationBar.tsx | 2 +- components/PIPIcon.tsx | 32 -------- components/PipResource.tsx | 60 ++++++++++++++ components/PipTask.tsx | 39 ++++++++++ components/Progressbar.tsx | 17 ++++ components/icons/ArticleIcon.tsx | 23 ++++++ components/icons/BookIcon.tsx | 22 ++++++ components/icons/VideoIcon.tsx | 25 ++++++ 11 files changed, 338 insertions(+), 35 deletions(-) delete mode 100644 components/PIPIcon.tsx create mode 100644 components/PipResource.tsx create mode 100644 components/PipTask.tsx create mode 100644 components/Progressbar.tsx create mode 100644 components/icons/ArticleIcon.tsx create mode 100644 components/icons/BookIcon.tsx create mode 100644 components/icons/VideoIcon.tsx diff --git a/app/globals.css b/app/globals.css index b5c61c9..d8ed286 100644 --- 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 index ecc957c..ddb17fb 100644 --- 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 ( diff --git a/app/pip/page.tsx b/app/pip/page.tsx index f5e328e..bf8b9b4 100644 --- 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 ( -
+
+
+

+ Performance Improvement Plan +

+ +
+
+

Tasks

+
+ {tasks.map((task, index) => ( + + ))} +
+
+
+

Resources

+
+ {resources.map((task, index) => ( + + ))} +
+
); }; diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx index bae982d..1140bfa 100644 --- 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 deleted file mode 100644 index edc507b..0000000 --- a/components/PIPIcon.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from "next/link"; - -interface PIPIconInterface { - path: string; - currentPath: string; -} -const PIPIcon = ({ path, currentPath }: PIPIconInterface) => { - const isActive = currentPath === path; - return ( - - - - - - ); -}; - -export default PIPIcon; diff --git a/components/PipResource.tsx b/components/PipResource.tsx new file mode 100644 index 0000000..cebf96d --- /dev/null +++ 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 ; + case "book": + return ; + case "article": + return ; + default: + return ; + } + }; + + const renderButtonLabel = () => { + switch (type) { + case "video": + return "Watch it"; + case "book": + return "Get it"; + case "article": + return "Read it"; + default: + return "Read it"; + } + }; + + return ( +
+
+ {renderIcon()} +

{title}

+
+

+ {description} +

+ +
+ ); +}; + +export default PipResource; diff --git a/components/PipTask.tsx b/components/PipTask.tsx new file mode 100644 index 0000000..bbedb84 --- /dev/null +++ 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(isDone); + const handleDone = () => { + setIsDone(!done); + }; + return ( +
+
+

{title}

+
+ +
+
+

+ {description} +

+
+ ); +}; + +export default PipTask; diff --git a/components/Progressbar.tsx b/components/Progressbar.tsx new file mode 100644 index 0000000..5af43ac --- /dev/null +++ b/components/Progressbar.tsx @@ -0,0 +1,17 @@ +interface InterfaceProgressBar { + width: number; // percentage + height: number; // height in talwindcss +} + +const ProgressBar = ({ width, height }: InterfaceProgressBar) => { + return ( +
+
+
+ ); +}; + +export default ProgressBar; diff --git a/components/icons/ArticleIcon.tsx b/components/icons/ArticleIcon.tsx new file mode 100644 index 0000000..8fa5417 --- /dev/null +++ b/components/icons/ArticleIcon.tsx @@ -0,0 +1,23 @@ +interface InterfaceArticle { + size: string; + color: string; +} + +const ArticleIcon = ({ size, color }: InterfaceArticle) => ( + + + +); + +export default ArticleIcon; diff --git a/components/icons/BookIcon.tsx b/components/icons/BookIcon.tsx new file mode 100644 index 0000000..c3a3e8e --- /dev/null +++ b/components/icons/BookIcon.tsx @@ -0,0 +1,22 @@ +interface InterfaceBookIcon { + color: string; + size: string; +} +const BookIcon = ({ color, size }: InterfaceBookIcon) => ( + + + +); + +export default BookIcon; diff --git a/components/icons/VideoIcon.tsx b/components/icons/VideoIcon.tsx new file mode 100644 index 0000000..e58e4e1 --- /dev/null +++ b/components/icons/VideoIcon.tsx @@ -0,0 +1,25 @@ +interface InterfaceVideoIcon { + color: string; + size: string; +} + +const VideoIcon = ({ color, size }: InterfaceVideoIcon) => { + return ( + + + + ); +}; + +export default VideoIcon;