theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: startpage done, needed components implemented, first tool began

Browse source
This commit is contained in:
theoleuthardt 2025-02-08 14:58:53 +01:00
parent 6da16f3858
commit 448065c715
6 changed files with 83 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/file-to-pdf/layout.tsx Normal file
View file

@ -0,0 +1,18 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "file-to-pdf",
description: "Converter for files to pdf format!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

17
src/app/file-to-pdf/page.tsx Normal file
View file

@ -0,0 +1,17 @@
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Button from "@/components/Button";
export default function Home() {
return (
<div className="h-screen w-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">
<h2 className="text-5xl font-bold text-white mb-16">file-to-pdf</h2>
<input type="file" className="bg-gray-800 text-white p-2 rounded-lg" />
<Button content="convert" className="text-" />
</div>
<Footer />
</div>
);
}

21
src/components/Button.tsx Normal file
View file

@ -0,0 +1,21 @@
"use client";
import React from "react";
interface ButtonProps {
className?: string;
content: string;
onClick?: Function;
}
const Button = (props: ButtonProps) => {
return (
<button
className={`p-3 border-2 border-white rounded-xl ` + props.className}
onClick={() => props.onClick && props.onClick()}
>
{props.content}
</button>
);
};
export default Button;

10
src/components/Footer.tsx
View file

@ -1,21 +1,21 @@
import React from "react"; import React from "react";
interface NavProps { interface FooterProps {
className?: string; className?: string;
} }
const navbar = (props: NavProps) => { const Footer = (props: FooterProps) => {
return ( return (
<div className={`h-18 w-full p-3 ` + props.className}> <div className={`h-18 w-full p-3 ` + props.className}>
<div className="text-md text-white font-bold flex flex-row items-center justify-center"> <div className="text-md text-white font-bold flex flex-row items-center justify-center">
<text>made by</text> <p>made by</p>
<a <a
className="mx-2 hover:underline hover:text-blue-400" className="mx-2 hover:underline hover:text-blue-400"
href="https://github.com/AuriomTex" href="https://github.com/AuriomTex"
> >
Domi Domi
</a> </a>
<text>and</text> <p>and</p>
<a <a
className="mx-2 hover:underline hover:text-blue-400" className="mx-2 hover:underline hover:text-blue-400"
href="https://github.com/theoleuthardt" href="https://github.com/theoleuthardt"
@ -27,4 +27,4 @@ const navbar = (props: NavProps) => {
); );
}; };
export default navbar; export default Footer;

8
src/components/Navbar.tsx
View file

@ -7,7 +7,7 @@ interface NavProps {
renderHomeLink: boolean; renderHomeLink: boolean;
} }
const navbar = (props: NavProps) => { const Navbar = (props: NavProps) => {
return ( return (
<div className={`h-18 w-full p-3 ` + props.className}> <div className={`h-18 w-full p-3 ` + props.className}>
<nav className="bg-black text-white font-bold flex flex-row items-center justify-between"> <nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
@ -24,14 +24,14 @@ const navbar = (props: NavProps) => {
<div className="flex flex-auto justify-center"> <div className="flex flex-auto justify-center">
{props.renderHomeLink ? ( {props.renderHomeLink ? (
<a <a
href="#" href="/"
className="justify-center text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400" className="justify-center text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
> >
home home
</a> </a>
) : null} ) : null}
</div> </div>
<div className="flex flex-auto justify-end"> <div className="flex flex-1 justify-end">
<a <a
href="https://github.com/theoleuthardt/werkzeugkiste" href="https://github.com/theoleuthardt/werkzeugkiste"
className="items-end mr-3 text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400" className="items-end mr-3 text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
@ -44,4 +44,4 @@ const navbar = (props: NavProps) => {
); );
}; };
export default navbar; export default Navbar;

36
src/constants/index.ts
View file

@ -1,38 +1,38 @@
export const toolLinks = [ export const toolLinks = [
{ {
title: "color-converter", title: "file-to-pdf",
link: "/color-converter", link: "/file-to-pdf",
}, },
{ {
title: "bg-remover", title: "img-to-png",
link: "/bg-remover", link: "/img-to-png",
}, },
{ {
title: "image-converter", title: "rgb-to-hex",
link: "/image-converter", link: "/rgb-to-hex",
}, },
{ {
title: "file converter", title: "video-to-gif",
link: "/file-converter", link: "/video-to-gif",
},
{
title: "password-generator",
link: "/password-generator",
},
{
title: "pomodoro-timer",
link: "/pomodoro-timer",
}, },
{ {
title: "qr-code-generator", title: "qr-code-generator",
link: "/qr-code-generator", link: "/qr-code-generator",
}, },
{
title: "password-generator",
link: "/password-generator",
},
{
title: "bg-remover",
link: "/bg-remover",
},
{ {
title: "word-counter", title: "word-counter",
link: "/word-counter", link: "/word-counter",
}, },
{ {
title: "video-to-gif", title: "pomodoro-timer",
link: "/video-to-gif", link: "/pomodoro-timer",
}, },
]; ];