53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Button from "@/components/ui/Button";
|
|
import Form from "@/components/ui/Form";
|
|
import NavLink from "@/components/ui/NavLink";
|
|
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"
|
|
onClick={() => {
|
|
console.log("Button!");
|
|
}}
|
|
/>
|
|
|
|
<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>NavLink</h1>
|
|
<NavLink name="Example Navlink" link="/Playground/Components/" />
|
|
|
|
<h2>External</h2>
|
|
<NavLink
|
|
name="Example External Navlink"
|
|
external={true}
|
|
link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/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>
|
|
);
|
|
}
|