Cleanup: combined the notes and task into one common component among …

…other minor changes.

app/fonts.tsx

@@ -4,10 +4,12 @@ export const raleway = Raleway({
   weight: ["400", "600"],
   subsets: ["latin"],
   display: "swap",
+  preload: true,
 });
 
 export const poppins = Poppins({
   weight: ["400", "500", "600"],
   subsets: ["latin"],
   display: "swap",
+  preload: true,
 });

app/page.tsx

@@ -1,83 +1,78 @@
 "use client";
-import React, { useEffect } from "react";
+import React from "react";
 import Image from "next/image";
 
-import Task from "@/components/task/task";
-import Note from "@/components/notes/notes";
+import Item from "@/components/item/item";
 import Date from "@/components/date/date";
 import CustomModal from "@/components/modal/modal";
 import { useDisclosure } from "@nextui-org/modal";
 import { raleway } from "./fonts";
 
-const tasks_arr = [
+const tasks = [
   {
     name: "Code",
-    time: "10:00AM, 27th Feb, 2024",
+    subtitle: "10:00AM, 27th Feb, 2024",
     key: 1,
   },
   {
     name: "Read",
-    time: "11:00AM, 27th Feb, 2024",
+    subtitle: "11:00AM, 27th Feb, 2024",
     key: 2,
   },
   {
     name: "Eat",
-    time: "12:00PM, 27th Feb, 2024",
+    subtitle: "12:00PM, 27th Feb, 2024",
     key: 3,
   },
   {
     name: "Sleep",
-    time: "1:00PM, 27th Feb, 2024",
+    subtitle: "1:00PM, 27th Feb, 2024",
     key: 4,
   },
   {
     name: "Repeat",
-    time: "2:00PM, 27th Feb, 2024",
+    subtitle: "2:00PM, 27th Feb, 2024",
     key: 5,
   },
 ];
 
-const notes_arr = [
+const notes = [
   {
     name: "C++ Pt. 1",
-    time: "10:00AM, 27th Feb, 2024",
+    subtitle: "10:00AM, 27th Feb, 2024",
     key: 1,
   },
   {
     name: "C++ Pt. 2",
-    time: "11:00AM, 27th Feb, 2024",
+    subtitle: "11:00AM, 27th Feb, 2024",
     key: 2,
   },
   {
     name: "C++ Pt. 3",
-    time: "12:00PM, 27th Feb, 2024",
+    subtitle: "12:00PM, 27th Feb, 2024",
     key: 3,
   },
   {
     name: "C++ Pt. 4",
-    time: "1:00PM, 27th Feb, 2024",
+    subtitle: "1:00PM, 27th Feb, 2024",
     key: 4,
   },
   {
     name: "C++ Pt. 5",
-    time: "2:00PM, 27th Feb, 2024",
+    subtitle: "2:00PM, 27th Feb, 2024",
     key: 5,
   },
 ];
 
 export default function Home() {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
-  useEffect(() => {
-    document.getElementById("modalOpener")?.addEventListener("click", onOpen);
-  }, [onOpen]);
-
   return (
     <div className="h-screen relative">
       <Image
         src="/background.png"
-        className="object-cover object-center h-full"
-        layout="fill"
+        className="object-cover object-center h-screen"
+        fill
         alt="Background"
       />
       {/* Outer Flexbox for the division into 25:75 */}
@@ -93,8 +88,8 @@ export default function Home() {
               <Date />
             </div>
 
-            <div className="absolute bottom-0 w-full p-4">
-              <button className="w-full py-2 px-4 bg-white bg-opacity-20 backdrop-blur-md hover:bg-opacity-40 text-white rounded-md">
+            <div className="absolute bottom-0 p-4 flex-1 ">
+              <button className="py-2 px-4 bg-white bg-opacity-20 backdrop-blur-md hover:bg-opacity-40 text-white rounded-md">
                 Sign Out
               </button>
             </div>
@@ -111,7 +106,7 @@ export default function Home() {
                   >
                     <h2 className={`font-semibold text-6xl`}>Tasks</h2>
 
-                    <button id="modalOpener">
+                    <button onClick={onOpen}>
                       <Image
                         priority
                         src="/plus.svg"
@@ -122,7 +117,7 @@ export default function Home() {
                     </button>
                   </div>
 
-                  <Task tasks_array={tasks_arr} />
+                  <Item items={tasks} />
                 </div>
               </div>
             </div>
@@ -146,7 +141,7 @@ export default function Home() {
                     </button>
                   </div>
 
-                  <Note notes_array={notes_arr} />
+                  <Item items={notes} />
                 </div>
               </div>
             </div>

components/date/date.tsx

@@ -38,7 +38,6 @@ const GetDate = () => {
   }
   const [date, setDate] = useState(getdateformatted());
 
-  // I didn't have useEffect before in this component, hence it was never triggering a re-render !
   React.useEffect(() => {
     setDate(getdateformatted());
   }, []);

components/task/task.tsx → components/item/item.tsx

@@ -5,55 +5,56 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useState } from "react";
 import { poppins } from "@/app/fonts";
 
-export interface TaskInterface {
+export interface ItemInterface {
   name: string;
-  time: string;
+  subtitle: string;
   key: number;
 }
 
 interface Props {
-  tasks_array: TaskInterface[];
+  items: ItemInterface[];
 }
 
-const Task: NextPage<Props> = (props) => {
-  const [tasks, setTasks] = useState(props.tasks_array);
+const Item: NextPage<Props> = (props) => {
+  const [items, setItems] = useState(props.items);
 
   return (
     <>
       <motion.ul
         className={`${poppins.className} flex flex-col mt-8`}
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.2 }}
+        transition={{ duration: 0.5 }}
       >
         <AnimatePresence>
-          {tasks.map((task: TaskInterface, index: number) => (
+          {items.map((item: ItemInterface, index: number) => (
             <motion.li
               initial={{ opacity: 0, y: 0 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: index * 0.1, duration: 0.2 }}
               exit={{ opacity: 0, y: 10 }}
-              key={task.key}
+              key={item.key}
             >
               {/* Item starts */}
               <div className="mb-4 bg-white bg-opacity-[.36] backdrop-blur-md rounded-lg">
                 <div className="p-4 pl-4 flex justify-between">
                   <div className="text">
                     <h2 className={`text-black font-semibold text-3xl`}>
-                      {task.name}
+                      {item.name}
+                    </h2>
+                    <h2 className={`text-[#565656] text-2xl`}>
+                      {item.subtitle}
                     </h2>
-                    <h2 className={`text-[#565656] text-2xl`}>{task.time}</h2>
                   </div>
                   <motion.button>
                     <Image
-                      priority
                       src="/minus.svg"
                       height={48}
                       width={48}
                       alt="Remove a task"
                       onClick={() =>
-                        setTasks((prevTasks) =>
-                          prevTasks.filter((_, i) => i !== index)
+                        setItems((prevItems) =>
+                          prevItems.filter((_, i) => i !== index)
                         )
                       }
                     />
@@ -69,4 +70,4 @@ const Task: NextPage<Props> = (props) => {
   );
 };
 
-export default Task;
+export default Item;

components/modal/modal.tsx

@@ -7,6 +7,7 @@ import {
   ModalBody,
   ModalFooter,
 } from "@nextui-org/modal";
+Textarea;
 import Image from "next/image";
 import React from "react";