From 9e2215b70ab778cb06fbd5742c6a41fab700a7c0 Mon Sep 17 00:00:00 2001
From: theoleuthardt <theoleuthardt12@gmail.com>
Date: Sat, 15 Feb 2025 22:12:14 +0100
Subject: [PATCH] feat: table as dropdown for information about input and
 output file formats

---
 frontend/src/app/doc-converter/layout.tsx |   2 +-
 frontend/src/app/doc-converter/page.tsx   | 127 +++++++++++++---------
 2 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/doc-converter/layout.tsx b/frontend/src/app/doc-converter/layout.tsx
index e813701..68aa695 100644
--- a/frontend/src/app/doc-converter/layout.tsx
+++ b/frontend/src/app/doc-converter/layout.tsx
@@ -4,7 +4,7 @@ import { toolLinks } from "@/constants";
 
 export const metadata: Metadata = {
   title: toolLinks[0].title,
-  description: "Converter for documents to pdf format!",
+  description: "Converter for documents!",
 };
 
 export default function RootLayout({
diff --git a/frontend/src/app/doc-converter/page.tsx b/frontend/src/app/doc-converter/page.tsx
index c275ce7..8255217 100644
--- a/frontend/src/app/doc-converter/page.tsx
+++ b/frontend/src/app/doc-converter/page.tsx
@@ -7,7 +7,7 @@ import Button from "../../components/Button";
 import Link from "next/link";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
-export default function Home() {
+export default function DocConverter() {
   const [file, setFile] = useState<File | null>(null);
   const [downloadUrl, setDownloadUrl] = useState<string>("");
   const [loading, setLoading] = useState(false);
@@ -20,7 +20,7 @@ export default function Home() {
     }
   };
 
-  const convertToPdf = async () => {
+  const convertDoc = async () => {
     if (!file) {
       alert("No file selected");
       return;
@@ -56,9 +56,9 @@ export default function Home() {
   };
 
   return (
-    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
+    <div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
       <Navbar renderHomeLink={true} />
-      <div className="w-screen h-screen flex flex-col items-center justify-center">
+      <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
           type="file"
@@ -80,127 +80,154 @@ export default function Home() {
                   "convert"
                 )
               }
-              onClick={convertToPdf}
+              onClick={convertDoc}
             />
           )}
         </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)
-          // TODO: Fix general site height and add scrolling
-          // TODO: Add animated pop in for the table body
         }
-        <div className="overflow-hidden text-xl rounded-lg border border-white">
+        <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"
             onClick={() => setTableOpen(!tableOpen)}
           >
-            <table className="w-full px-6 py-4 border-b">
+            <table className="px-6 py-4 border-b">
               <thead>
                 <tr className="border-b border-white">
-                  <th className="w-sm px-6 py-4 border-r">📥 Input Format</th>
-                  <th className="w-sm px-6 py-4 flex flex-row">
-                    <p className="pr-4">📤 Output Format</p>
-                    {tableOpen ? (
-                      <ChevronUp className="h-6 w-6" />
-                    ) : (
-                      <ChevronDown className="h-6 w-6" />
-                    )}
+                  <th className="min-w-96 px-6 py-4 border-r border-white">
+                    📥 Input Format
+                  </th>
+                  <th className="min-w-[398px] px-6 py-4 flex flex-row justify-between items-center">
+                    <p className="pr-4 mx-auto">📤 Output Format</p>
+                    <div className="flex items-end justify-end place-content-end">
+                      {tableOpen ? (
+                        <ChevronUp className="h-6 w-6" />
+                      ) : (
+                        <ChevronDown className="h-6 w-6" />
+                      )}
+                    </div>
                   </th>
                 </tr>
               </thead>
             </table>
           </div>
 
-          {tableOpen && (
-            <table className="w-full text-left border-collapse">
+          <div
+            className={`
+          }overflow-hidden transition-all duration-700 ease-in-out ${tableOpen ? "max-h-[900px]" : "max-h-0"}`}
+          >
+            <table className="w-full h-auto text-left border-collapse border-white">
               <tbody>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.doc (MS Word)</td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .doc (MS Word)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .docx, .odt, .txt, .rtf, .html, .epub
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.docx (MS Word)</td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .docx (MS Word)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .odt, .txt, .rtf, .html, .epub
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">
+                  <td className="min-w-96 px-6 py-4 border-r">
                     .odt (OpenDocument Text)
                   </td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .doc, .docx, .txt, .rtf, .html, .epub
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">
+                  <td className="min-w-96 px-6 py-4 border-r">
                     .rtf (Rich Text Format)
                   </td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .doc, .docx, .odt, .txt, .html
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.txt (Text)</td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4 border-r">.txt (Text)</td>
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .doc, .docx, .odt, .txt, .html
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.html (Webseite)</td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .html (Webseite)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .doc, .docx, .odt, .rtf, .txt
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.epub (E-Book)</td>
-                  <td className="px-6 py-4">
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .epub (E-Book)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">
                     .pdf, .doc, .docx, .odt, .rtf, .txt
                   </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.xls (MS Excel)</td>
-                  <td className="px-6 py-4">.pdf, .xlsx, .ods, .csv</td>
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .xls (MS Excel)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">
+                    .pdf, .xlsx, .ods, .csv
+                  </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.xlsx (MS Excel)</td>
-                  <td className="px-6 py-4">.pdf, .xls, .ods, .csv</td>
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .xlsx (MS Excel)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">.pdf, .xls, .ods, .csv</td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">
+                  <td className="min-w-96 px-6 py-4 border-r">
                     .ods (OpenDocument Spreadsheet)
                   </td>
-                  <td className="px-6 py-4">.pdf, .xls, .xlsx, .csv</td>
+                  <td className="min-w-96 px-6 py-4">
+                    .pdf, .xls, .xlsx, .csv
+                  </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">
+                  <td className="min-w-96 px-6 py-4 border-r">
                     .csv (Comma-Separated Values)
                   </td>
-                  <td className="px-6 py-4">.pdf, .xls, .xlsx, .ods</td>
+                  <td className="min-w-96 px-6 py-4">
+                    .pdf, .xls, .xlsx, .ods
+                  </td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.ppt (MS PowerPoint)</td>
-                  <td className="px-6 py-4">.pdf, .pptx, .odp</td>
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .ppt (MS PowerPoint)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">.pdf, .pptx, .odp</td>
                 </tr>
                 <tr className="border-b">
-                  <td className="px-6 py-4 border-r">.pptx (MS PowerPoint)</td>
-                  <td className="px-6 py-4">.pdf, .ppt, .odp</td>
+                  <td className="min-w-96 px-6 py-4 border-r">
+                    .pptx (MS PowerPoint)
+                  </td>
+                  <td className="min-w-96 px-6 py-4">.pdf, .ppt, .odp</td>
                 </tr>
-                <tr className="border-b">
-                  <td className="px-6 py-4 border-r">
+                <tr className="pb-10">
+                  <td className="min-w-96 px-6 py-4 border-r">
                     .odp (OpenDocument Presentation)
                   </td>
-                  <td className="px-6 py-4">.pdf, .ppt, .pptx</td>
+                  <td className="min-w-96 px-6 py-4">.pdf, .ppt, .pptx</td>
                 </tr>
               </tbody>
             </table>
-          )}
+          </div>
         </div>
       </div>
-      <Footer />
+      <Footer className="flex justify-center items-end" />
     </div>
   );
 }