Hannah/Dagemark-Webapp
Watch
1
0
Fork
You've already forked Dagemark-Webapp
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add generic button component

Browse source
This commit is contained in:
Hannah dagemark 2026-09-20 15:02:12 +02:00
commit 1293d40894
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/Playground/Components/page.tsx
View file

@ -1,3 +1,4 @@
import Button from "@/components/ui/Button";
import Form from "@/components/ui/Form";
import Hyperlink from "@/components/ui/Hyperlink";
import Referencelink from "@/components/ui/Referencelink";
@ -6,6 +7,9 @@ import RoundedContainer from "@/components/ui/RoundedContainer";
export default function Components() {
return (
<div className="flex flex-col items-center gap-4 w-full h-full">
<h1>Button</h1>
<Button title={"Button"} mode="DARK" />
<h1>Form</h1>
<Form action={"Action here"} submitText="Example submit button ">
<input type="text" name="text" placeholder="example placeholder text" />

15
components/ui/Button.tsx Normal file
View file

@ -0,0 +1,15 @@
export default function Button({
title,
mode = "LIGHT",
}: {
title: string;
mode?: "DARK" | "LIGHT";
}) {
return (
<button
className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 hover:bg-slate-600" : "bg-gray-400 dark:bg-slate-900"} font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
>
{title}
</button>
);
}