Fix button and link executions

app/Playground/Components/page.tsx

@@ -1,14 +1,21 @@
+"use client";
+
 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 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">
       <h1>Button</h1>
-      <Button title={"Button"} mode="DARK" />
+      <Button
+        title={"Button"}
+        mode="DARK"
+        onClick={() => {
+          console.log("Button!");
+        }}
+      />
 
       <h1>Form</h1>
       <Form action={"Action here"} submitText="Example submit button ">
@@ -16,16 +23,14 @@ export default function Components() {
         {/* Add custom input! */}
       </Form>
 
-      <h1>Hyperlink</h1>
-      <Hyperlink
-        name="Example Hyperlink"
-        link={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/Playground/Components/`}
-      />
+      <h1>NavLink</h1>
+      <NavLink name="Example Navlink" link="/Playground/Components/" />
 
-      <h1>Referencelink</h1>
-      <Referencelink
-        name="Example Referencelink"
-        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>