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

Component changes, added components dev area / showcase ( Playground / Components )

Browse source
This commit is contained in:
Hannah dagemark 2026-09-17 19:19:24 +02:00
commit ca6fd65f96
4 changed files with 92 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/Playground/Components/page.tsx Normal file
View file

@ -0,0 +1,44 @@
import Form from "@/components/ui/Form";
import Hyperlink from "@/components/ui/Hyperlink";
import Referencelink from "@/components/ui/Referencelink";
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>Form</h1>
<Form action={"Action here"} submitText="Example submit button ">
<input type="text" name="text" placeholder="example placeholder text" />
{/* Add custom input! */}
</Form>
<h1>Hyperlink</h1>
<Hyperlink
name="Example Hyperlink"
link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
/>
<h1>Referencelink</h1>
<Referencelink
name="Example Referencelink"
link="/Playground/Components/"
/>
<h1>Rounded Container</h1>
<RoundedContainer>
<div className=" min-h-5 min-w-5">
<p>Contents</p>
<p>More Contents</p>
</div>
</RoundedContainer>
<h2>Non-slim</h2>
<RoundedContainer slim={false}>
<div className=" min-h-5 min-w-5">
<p>Contents</p>
<p>More Contents</p>
</div>
</RoundedContainer>
</div>
);
}

26
components/ui/Hyperlink.tsx
View file

@ -1,9 +1,17 @@
export default function Hyperlink({name, link}: {name: string; link: string}) {
return (
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
<a href={`https://${link}`} className="block">
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">{name}</h1>
</a>
</div>
)
}
export default function Hyperlink({
name,
link,
}: {
name: string;
link: string;
}) {
return (
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
<a href={`https://${link}`} className="block">
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
{name}
</h1>
</a>
</div>
);
}

26
components/ui/Referencelink.tsx
View file

@ -1,9 +1,17 @@
export default function Referencelink({name, link}: {name: string; link: string}) {
return (
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
<a href={`${link}`} className="block">
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">{name}</h1>
</a>
</div>
)
}
export default function Referencelink({
name,
link,
}: {
name: string;
link: string;
}) {
return (
<div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
<a href={`${link}`} className="block">
<h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
{name}
</h1>
</a>
</div>
);
}

18
components/ui/RoundedContainer.tsx
View file

@ -1,9 +1,19 @@
import React from "react";
export default function RoundedContainer({children, slim = true}: {children: React.ReactNode, slim?: boolean}) {
export default function RoundedContainer({
children,
slim = true,
direction = "column",
}: {
children: React.ReactNode;
slim?: boolean;
direction?: "column" | "row";
}) {
return (
<div className={`flex ${slim ? "max-w-6xl" : "max-w-3xl"} rounded-4xl flex-col items-center py-8 px-8 bg-gray-400 dark:bg-slate-900 sm:items-start`}>
<div
className={`flex ${slim ? "max-w-6xl" : "max-w-3xl"} rounded-4xl ${direction == "column" ? "flex-col" : "flex-row"} items-center py-8 px-8 bg-gray-400 dark:bg-slate-900 sm:items-start`}
>
{children}
</div>
)
}
);
}