Add new dropdown component to the main page with styles

app/page.tsx

@@ -5,6 +5,7 @@ import Intro from "@/components/intro";
 import Projects from "@/components/projects";
 import SectionDivider from "@/components/section-divider";
 import Skills from "@/components/skills";
+import Selection from "@/components/selection";
 
 export default function Home() {
   return (
@@ -16,6 +17,7 @@ export default function Home() {
       <Skills />
       <Experience />
       <Contact />
+      <Selection />
     </main>
   );
 }

components/dropdown.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from 'react';
+
+interface DropdownProps {
+  items: { name: string, message: string, created_at: string | number }[];
+  onSelect: (item: any) => void;
+}
+
+function Dropdown({ items, onSelect }: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const maxHeight = Math.min(items.length, 5)*3;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <button
+      type="submit"
+      className="group flex items-center justify-center gap-2 h-[2.5rem] w-[9rem] bg-gray-900 text-white rounded-full outline-none transition-all focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 dark:bg-white dark:bg-opacity-10 disabled:scale-100 disabled:bg-opacity-65"
+      onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? 'Close' : 'Open Dropdown'}
+      </button>
+      <br />
+      {isOpen && (
+        <ul className="justify-center gap-2 text-lg text-gray-800" style={{ maxHeight: `${maxHeight}rem`, overflowY: 'scroll', width: '100%'}}>
+          {items.map((item, idx) => {
+            const date = String(new Date(item.created_at)).split('(')[0];
+            const parse = `${item.name} "${item.message}" ${date}`;
+            return (
+            <li key={idx} onClick={() => { onSelect(parse); setIsOpen(false) }} className="bg-white borderBlack rounded-xl px-5 py-3 dark:bg-white/10 dark:text-white/80 cursor-pointer">
+              {parse}
+            </li>
+          )
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;

components/header.tsx

@@ -14,7 +14,7 @@ export default function Header() {
   return (
     <header className="z-[999] relative">
       <motion.div
-        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
+        className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[44rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
         initial={{ y: -100, x: "-50%", opacity: 0 }}
         animate={{ y: 0, x: "-50%", opacity: 1 }}
       ></motion.div>

components/selection.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from 'react';
+import useSWR from 'swr';
+import Dropdown from './dropdown';
+import { motion } from "framer-motion";
+import { useSectionInView } from "@/lib/hooks";
+import SectionHeading from './section-heading';
+
+
+interface Item {
+  name: string;
+  message: string;
+  created_at: string | number;
+}
+
+interface Response {
+  rows: Item[];
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const Selection = () => {
+  const { data } = useSWR<Response>('https://generic-web-app-be.azurewebsites.net/api/generic_data/messages/?collection_name=monolith&skip=0&limit=32', fetcher);
+
+  const items: Item[] = data?.rows || [];
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const { ref } = useSectionInView("Selection");
+
+  return (
+    <motion.section
+      id="selection"
+      ref={ref}
+      className="mb-20 sm:mb-28 w-[min(100%,38rem)] text-center"
+      initial={{
+        opacity: 0,
+      }}
+      whileInView={{
+        opacity: 1,
+      }}
+      transition={{
+        duration: 1,
+      }}
+      viewport={{
+        once: true,
+      }}
+    >
+      <SectionHeading>Dropdown Selection</SectionHeading>
+      {selectedItem && <div className="bg-white borderBlack rounded-xl px-5 py-3 dark:bg-white/10 dark:text-white/80">Selected: {selectedItem}</div>}
+      <br />
+      <Dropdown items={items} onSelect={setSelectedItem} />
+    </motion.section>
+  );
+}
+
+export default Selection;

lib/data.ts

@@ -31,6 +31,10 @@ export const links = [
     name: "Contact",
     hash: "#contact",
   },
+  {
+    name: "Selection",
+    hash: "#selection",
+  },
 ] as const;
 
 export const experiencesData = [

package.json

@@ -11,8 +11,6 @@
   "dependencies": {
     "@react-email/components": "^0.0.7",
     "@react-email/tailwind": "^0.0.8",
-    "@types/node": "20.3.2",
-    "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
     "clsx": "^1.2.1",
@@ -28,10 +26,13 @@
     "react-intersection-observer": "^9.5.2",
     "react-vertical-timeline-component": "^3.6.0",
     "resend": "^0.16.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.5"
+    "swr": "^2.2.4",
+    "tailwindcss": "3.3.2"
   },
   "devDependencies": {
-    "@types/react-vertical-timeline-component": "^3.3.3"
+    "@types/node": "20.8.6",
+    "@types/react": "18.2.28",
+    "@types/react-vertical-timeline-component": "^3.3.3",
+    "typescript": "5.2.2"
   }
 }