61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Button from "@/components/ui/Button";
|
|
import Dropdown from "@/components/ui/Dropdown";
|
|
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 px-10">
|
|
<h1>Dropdown</h1>
|
|
<Dropdown title="Dropdown" mode="DARK">
|
|
<NavLink name="Home" link="/" />
|
|
<NavLink name="Admin" link="/Admin" />
|
|
<NavLink name="Hannah" link="/Hannah" />
|
|
</Dropdown>
|
|
|
|
<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>
|
|
);
|
|
}
|