mirror of
https://github.com/theoleuthardt/werkzeugkiste.git
synced 2026-06-13 09:37:53 +00:00
feat: table as dropdown for information about input and output file formats
This commit is contained in:
theoleuthardt
parent
6d71eaef03
commit
9e2215b70a
2 changed files with 78 additions and 51 deletions
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue