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

WIP: Major Update 0.2 #3

Draft
Hannah wants to merge 19 commits from Devbranch into main
pull from: Devbranch
merge into: Hannah:main
Conversation 0 Commits 19 Files changed 36 +19
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1293d40894 - Show all commits

Add generic button component

Prev Next
Hannah dagemark 2026-09-20 15:02:12 +02:00
commit 1293d40894

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