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

components/ui/Hyperlink.tsx

@@ -1,9 +1,17 @@
-export default function Hyperlink({name, link}: {name: string; link: string}) {
+export default function Hyperlink({
-    return (
+  name,
-      <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">
+  link,
-        <a href={`https://${link}`} className="block">
+}: {
-          <h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">{name}</h1>
+  name: string;
-        </a>
+  link: string;
-      </div>
+}) {
-    )
+  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>
+  );
 }

components/ui/Referencelink.tsx

@@ -1,9 +1,17 @@
-export default function Referencelink({name, link}: {name: string; link: string}) {
+export default function Referencelink({
-    return (
+  name,
-      <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">
+  link,
-        <a href={`${link}`} className="block">
+}: {
-          <h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">{name}</h1>
+  name: string;
-        </a>
+  link: string;
-      </div>
+}) {
-    )
+  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>
+  );
 }

components/ui/RoundedContainer.tsx

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