From ca6fd65f9649316dde6b8a0c0d53075584ef72f4 Mon Sep 17 00:00:00 2001
From: Hannah dagemark <dagemark@student.chalmers.se>
Date: Thu, 17 Sep 2026 19:19:24 +0200
Subject: [PATCH] Component changes, added components dev area / showcase (
 Playground / Components )

---
 app/Playground/Components/page.tsx | 44 ++++++++++++++++++++++++++++++
 components/ui/Hyperlink.tsx        | 26 ++++++++++++------
 components/ui/Referencelink.tsx    | 26 ++++++++++++------
 components/ui/RoundedContainer.tsx | 18 +++++++++---
 4 files changed, 92 insertions(+), 22 deletions(-)
 create mode 100644 app/Playground/Components/page.tsx

diff --git a/app/Playground/Components/page.tsx b/app/Playground/Components/page.tsx
new file mode 100644
index 0000000..3593510
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/components/ui/Hyperlink.tsx b/components/ui/Hyperlink.tsx
index 7a61cf5..4308fcb 100644
--- a/components/ui/Hyperlink.tsx
+++ b/components/ui/Hyperlink.tsx
@@ -1,9 +1,17 @@
-export default function Hyperlink({name, link}: {name: string; link: string}) {
-    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>
-    )
-}
\ No newline at end of file
+export default function Hyperlink({
+  name,
+  link,
+}: {
+  name: string;
+  link: string;
+}) {
+  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>
+  );
+}
diff --git a/components/ui/Referencelink.tsx b/components/ui/Referencelink.tsx
index 220f680..f06c08d 100644
--- a/components/ui/Referencelink.tsx
+++ b/components/ui/Referencelink.tsx
@@ -1,9 +1,17 @@
-export default function Referencelink({name, link}: {name: string; link: string}) {
-    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>
-    )
-}
\ No newline at end of file
+export default function Referencelink({
+  name,
+  link,
+}: {
+  name: string;
+  link: string;
+}) {
+  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>
+  );
+}
diff --git a/components/ui/RoundedContainer.tsx b/components/ui/RoundedContainer.tsx
index e3e427d..4c918ac 100644
--- a/components/ui/RoundedContainer.tsx
+++ b/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>
-  )
-}
\ No newline at end of file
+  );
+}