48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import Button from "@/components/ui/Button";
|
|
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>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" />
|
|
{/* 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>
|
|
);
|
|
}
|