feat: new dropdown menu for output file format as standalone component

frontend/src/app/doc-converter/page.tsx

@@ -6,6 +6,7 @@ import Footer from "../../components/Footer";
 import Button from "../../components/Button";
 import Link from "next/link";
 import { ChevronDown, ChevronUp } from "lucide-react";
+import Dropdown from "@/components/Dropdown";
 
 export default function DocConverter() {
   const [file, setFile] = useState<File | null>(null);
@@ -60,12 +61,16 @@ export default function DocConverter() {
       <Navbar renderHomeLink={true} />
       <div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
         <h2 className="text-5xl font-bold text-white mb-16">doc-converter</h2>
-        <input
+        <div className="h-36 flex flex-row items-center justify-center gap-20">
-          type="file"
+          <input
-          className="border-2 border-white p-3 rounded-xl text-center text-white"
+            type="file"
-          id="documentUpload"
+            className="h-14 border-2 border-white p-3 rounded-xl text-center text-white"
-          onChange={handleFileChange}
+            id="documentUpload"
-        />
+            onChange={handleFileChange}
+          />
+          {/* TODO: Fix Dropdown menu placement */}
+          <Dropdown content="output format" className="h-14" />
+        </div>
         <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
           {downloadUrl ? (
             <Link id="downloadPDF" href={downloadUrl}>
@@ -84,10 +89,6 @@ export default function DocConverter() {
             />
           )}
         </div>
-        {
-          // TODO: Fix Table Head widths (fixed and the same as the max body width)
-          // TODO: Add hover animation to table head (scale-110, blue text, blue border)
-        }
         <div className="overflow-hidden text-xl rounded-lg border border-white mb-16 transition-all duration-300 ease-in-out hover:border-blue-400">
           <div
             className="cursor-pointer flex justify-between items-center"

frontend/src/components/Dropdown.tsx

@@ -0,0 +1,93 @@
+"use client";
+import React, { useState } from "react";
+import Link from "next/link";
+
+// TODO: Adjust the width of the option list to match the width of the button
+// TODO: Dynamic rendering of options
+
+interface DropdownProps {
+  content: string;
+  className?: string;
+}
+
+const Dropdown = (props: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={`w-full py-6 pb-8 ${props.className}`}>
+      <div className="relative inline-block">
+        <button
+          type="button"
+          className="px-4 py-2 text-white bg-black rounded-lg text-2xl inline-flex items-center
+          border-white border-2 hover:text-blue-400 hover:border-blue-400"
+          onClick={toggleDropdown}
+        >
+          {props.content}{" "}
+          <svg
+            className="w-2.5 h-2.5 ml-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 10 6"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m1 1 4 4 4-4"
+            />
+          </svg>
+        </button>
+        <div
+          className={`origin-top-right absolute right-0 mt-1 rounded-lg shadow-lg ring-1 ring-white
+        ring-opacity-5 border-2 border-white transition-all duration-500 ease-in-out ${isOpen ? "opacity-100" : "opacity-0"}`}
+        >
+          <ul
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="options-menu"
+          >
+            <li>
+              <Link
+                href="#"
+                className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
+                onClick={closeDropdown}
+              >
+                Option 1
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="#"
+                className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
+                onClick={closeDropdown}
+              >
+                Option 2
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="#"
+                className="block px-4 py-2 rounded-lg hover:text-blue-400 hover:border-2 hover:border-blue-400"
+                onClick={closeDropdown}
+              >
+                Option 3
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;