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

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>
)
}
);
}