add a dropdown list functional

app/page.tsx

@@ -3,18 +3,20 @@ import Contact from "@/components/contact";
 import Experience from "@/components/experience";
 import Intro from "@/components/intro";
 import Projects from "@/components/projects";
+import Dropdown from "@/components/dropdown";
 import SectionDivider from "@/components/section-divider";
 import Skills from "@/components/skills";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center px-4">
+    <main className='flex flex-col items-center px-4'>
       <Intro />
       <SectionDivider />
       <About />
       <Projects />
       <Skills />
       <Experience />
+      <Dropdown />
       <Contact />
     </main>
   );

components/dropdown.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import SectionHeading from "./section-heading";
+import Select from "./select";
+
+export default function Dropdown() {
+  const [isHidden, setIsHidden] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState("");
+
+  const handleSelectItem = () => {
+    setIsHidden(false);
+  };
+
+  return (
+    <section id='dropdown' className='mb-28 max-w-[53rem] scroll-mt-28 text-center sm:mb-40'>
+      <SectionHeading>My Dropdown</SectionHeading>
+      {isHidden ? (
+        <div>
+          <div>{selectedItem}</div>
+          <button onClick={handleSelectItem} className='mt-4 border-white border-2 rounded py-1 px-2'>
+            go back to select
+          </button>
+        </div>
+      ) : (
+        <Select isHidden={isHidden} setIsHidden={setIsHidden} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
+      )}
+    </section>
+  );
+}

components/select.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { dropdownData } from "@/lib/data";
+
+interface SelectProps {
+  isHidden: boolean;
+  setIsHidden: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedItem: string;
+  setSelectedItem: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function Select({ isHidden, setIsHidden, selectedItem, setSelectedItem }: SelectProps) {
+  const handleSelect = (item: string) => {
+    setSelectedItem(item);
+    setIsHidden(true);
+  };
+
+  return (
+    <div>
+      <select value={selectedItem} onChange={(e) => handleSelect(e.target.value)} placeholder='select' className='text-white bg-gray-900 border-white border-2 rounded py-1 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 '>
+        {dropdownData.rows.map((item, index) => (
+          <option key={index} value={item.name + "-" + item.message}>
+            {item.name + "-" + item.message}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

lib/data.ts

@@ -33,28 +33,38 @@ export const links = [
   },
 ] as const;
 
+export const dropdownData = {
+  rows: [
+    { name: "Jon Doe", message: "Hello World!", created_at: "2023-05-22T21:50:17.051619" },
+    { name: "Jean Doe", message: "Hello World!", created_at: "2023-05-22T21:50:17.051626" },
+    { name: "John Doe", message: "Hello World!", created_at: 1684807213.801339 },
+    { name: "Jean Doe", message: "Hello World!", created_at: 1684807213.801344 },
+    { name: "John Doe", id: "1", message: "Hey!", created_at: 1684899023.827662 },
+    { name: "Jean Doe", id: "2", message: "Hello World!", created_at: 1684899023.827679 },
+  ],
+  rows_retrieved: 6,
+  rows_total: 6,
+};
+
 export const experiencesData = [
   {
     title: "Graduated bootcamp",
     location: "Miami, FL",
-    description:
-      "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
+    description: "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
     icon: React.createElement(LuGraduationCap),
     date: "2019",
   },
   {
     title: "Front-End Developer",
     location: "Orlando, FL",
-    description:
-      "I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
+    description: "I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
     icon: React.createElement(CgWorkAlt),
     date: "2019 - 2021",
   },
   {
     title: "Full-Stack Developer",
     location: "Houston, TX",
-    description:
-      "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
+    description: "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
     icon: React.createElement(FaReact),
     date: "2021 - present",
   },
@@ -63,45 +73,22 @@ export const experiencesData = [
 export const projectsData = [
   {
     title: "CorpComment",
-    description:
-      "I worked as a full-stack developer on this startup project for 2 years. Users can give public feedback to companies.",
+    description: "I worked as a full-stack developer on this startup project for 2 years. Users can give public feedback to companies.",
     tags: ["React", "Next.js", "MongoDB", "Tailwind", "Prisma"],
     imageUrl: corpcommentImg,
   },
   {
     title: "rmtDev",
-    description:
-      "Job board for remote developer jobs. I was the front-end developer. It has features like filtering, sorting and pagination.",
+    description: "Job board for remote developer jobs. I was the front-end developer. It has features like filtering, sorting and pagination.",
     tags: ["React", "TypeScript", "Next.js", "Tailwind", "Redux"],
     imageUrl: rmtdevImg,
   },
   {
     title: "Word Analytics",
-    description:
-      "A public web app for quick analytics on text. It shows word count, character count and social media post limits.",
+    description: "A public web app for quick analytics on text. It shows word count, character count and social media post limits.",
     tags: ["React", "Next.js", "SQL", "Tailwind", "Framer"],
     imageUrl: wordanalyticsImg,
   },
 ] as const;
 
-export const skillsData = [
-  "HTML",
-  "CSS",
-  "JavaScript",
-  "TypeScript",
-  "React",
-  "Next.js",
-  "Node.js",
-  "Git",
-  "Tailwind",
-  "Prisma",
-  "MongoDB",
-  "Redux",
-  "GraphQL",
-  "Apollo",
-  "Express",
-  "PostgreSQL",
-  "Python",
-  "Django",
-  "Framer Motion",
-] as const;
+export const skillsData = ["HTML", "CSS", "JavaScript", "TypeScript", "React", "Next.js", "Node.js", "Git", "Tailwind", "Prisma", "MongoDB", "Redux", "GraphQL", "Apollo", "Express", "PostgreSQL", "Python", "Django", "Framer Motion"] as const;