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";
interface NavProps {
interface FooterProps {
className?: string;
}
const navbar = (props: NavProps) => {
const Footer = (props: FooterProps) => {
return (
<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">
<text>made by</text>
<p>made by</p>
<a
className="mx-2 hover:underline hover:text-blue-400"
href="https://github.com/AuriomTex"
>
Domi
</a>
<text>and</text>
<p>and</p>
<a
className="mx-2 hover:underline hover:text-blue-400"
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;
}
const navbar = (props: NavProps) => {
const Navbar = (props: NavProps) => {
return (
<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">
@ -24,14 +24,14 @@ const navbar = (props: NavProps) => {
<div className="flex flex-auto justify-center">
{props.renderHomeLink ? (
<a
href="#"
href="/"
className="justify-center text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
>
home
</a>
) : null}
</div>
<div className="flex flex-auto justify-end">
<div className="flex flex-1 justify-end">
<a
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"
@ -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 = [
{
title: "color-converter",
link: "/color-converter",
title: "file-to-pdf",
link: "/file-to-pdf",
},
{
title: "bg-remover",
link: "/bg-remover",
title: "img-to-png",
link: "/img-to-png",
},
{
title: "image-converter",
link: "/image-converter",
title: "rgb-to-hex",
link: "/rgb-to-hex",
},
{
title: "file converter",
link: "/file-converter",
},
{
title: "password-generator",
link: "/password-generator",
},
{
title: "pomodoro-timer",
link: "/pomodoro-timer",
title: "video-to-gif",
link: "/video-to-gif",
},
{
title: "qr-code-generator",
link: "/qr-code-generator",
},
{
title: "password-generator",
link: "/password-generator",
},
{
title: "bg-remover",
link: "/bg-remover",
},
{
title: "word-counter",
link: "/word-counter",
},
{
title: "video-to-gif",
link: "/video-to-gif",
title: "pomodoro-timer",
link: "/pomodoro-timer",
},
];