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

app/Playground/Components/page.tsx

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