From 3323f171e650a6ba1b4e132a571d197aab451f09 Mon Sep 17 00:00:00 2001
From: Eero Holmala <eero.holmala@hotmail.com>
Date: Sun, 2 Jun 2024 11:26:01 +0300
Subject: [PATCH] Frontend: Added button component with basic style, refactored
 Logo into svg/svg.tsx

---
 wretched-machines-frontend/src/app/page.tsx      | 16 +++++++++-------
 .../src/app/tools/page.tsx                       | 14 ++++++++++++--
 .../src/components/svg/svg.tsx                   | 15 +++++++++++++++
 .../src/components/ui/button.tsx                 | 16 ++++++++++++++++
 .../src/components/ui/content-box.tsx            |  2 +-
 .../src/components/ui/navbar.tsx                 |  5 +++--
 6 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 wretched-machines-frontend/src/components/svg/svg.tsx
 create mode 100644 wretched-machines-frontend/src/components/ui/button.tsx

diff --git a/wretched-machines-frontend/src/app/page.tsx b/wretched-machines-frontend/src/app/page.tsx
index dde265e..9dba462 100644
--- a/wretched-machines-frontend/src/app/page.tsx
+++ b/wretched-machines-frontend/src/app/page.tsx
@@ -4,14 +4,16 @@ import PageTitle from "@/components/ui/page-title";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="flex min-h-screen flex-col items-center p-24">
       <PageTitle title="Welcome"/>
-      <ContentBox title="This is a title">
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
-      </ContentBox>
-      <ContentBox title="This is another title">
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
-      </ContentBox>
+      <div className="flex lg:flex-row sm:flex-col xs:flex-col">
+        <ContentBox title="This is a title">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
+        </ContentBox>
+        <ContentBox title="This is another title">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
+        </ContentBox>
+      </div>
     </main>
   );
 }
diff --git a/wretched-machines-frontend/src/app/tools/page.tsx b/wretched-machines-frontend/src/app/tools/page.tsx
index 6172e3c..7edbcc3 100644
--- a/wretched-machines-frontend/src/app/tools/page.tsx
+++ b/wretched-machines-frontend/src/app/tools/page.tsx
@@ -1,12 +1,22 @@
+"use client"
+
+import Button from "@/components/ui/button";
 import ContentBox from "@/components/ui/content-box";
 import PageTitle from "@/components/ui/page-title";
 
 export default function Tools() {
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        e.preventDefault();
+        console.log("Clicked");
+    }
+
     return (
         <main className="flex min-h-screen flex-col items-center justify-between p-24">
             <PageTitle title="Tools"/>
-            <ContentBox title="This is a title">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
+            <ContentBox title="This one has a button!">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
+                <Button onClick={(e)=>handleClick(e)}>Click Me!</Button>
             </ContentBox>
             <ContentBox title="This is another title">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
diff --git a/wretched-machines-frontend/src/components/svg/svg.tsx b/wretched-machines-frontend/src/components/svg/svg.tsx
new file mode 100644
index 0000000..d73865c
--- /dev/null
+++ b/wretched-machines-frontend/src/components/svg/svg.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+type LogoProps = {
+    className?: string
+};
+
+const Logo = (props: LogoProps) => <svg className={cn("fill-current h-3 w-3", props.className)} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+
+const HamburgerIcon = (props: LogoProps) => <svg className={cn("fill-current h-8 w-8 mr-2", props.className)} width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fillRule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fillRule="evenodd"/></svg>
+
+
+export { 
+    Logo,
+    HamburgerIcon
+ };
\ No newline at end of file
diff --git a/wretched-machines-frontend/src/components/ui/button.tsx b/wretched-machines-frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..d03c8dd
--- /dev/null
+++ b/wretched-machines-frontend/src/components/ui/button.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+type ButtonProps = {
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+};
+
+const Button = (props: ButtonProps) => {
+    // TODO(Eero): Handle disabled, primary style, secondary style, hover, clicked, animation.
+    return(
+        <button className={cn("text-white bg-666666 p-1 hover:bg-black cursor-pointer outline-offset-2 hover:outline outline-black border-black outline-2 active:text-eth active:bg-white active:outline-white",props.className)} onClick={props.onClick}>{props.children}</button>
+    );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/wretched-machines-frontend/src/components/ui/content-box.tsx b/wretched-machines-frontend/src/components/ui/content-box.tsx
index 1c04fdc..bed9a78 100644
--- a/wretched-machines-frontend/src/components/ui/content-box.tsx
+++ b/wretched-machines-frontend/src/components/ui/content-box.tsx
@@ -7,7 +7,7 @@ interface ContentBoxProps {
 
 const ContentBox = (props: ContentBoxProps)=>{
     return(
-        <div className={cn("shadow-lg m-10")}>
+        <div className={cn("shadow-lg m-10 flex-col")}>
             <div className={cn("bg-666666 text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
             <div className={cn("border-solid border-1 border-black p-8 text-eth")}>
                 {props.children}
diff --git a/wretched-machines-frontend/src/components/ui/navbar.tsx b/wretched-machines-frontend/src/components/ui/navbar.tsx
index 69ec604..b4878f2 100644
--- a/wretched-machines-frontend/src/components/ui/navbar.tsx
+++ b/wretched-machines-frontend/src/components/ui/navbar.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { cn } from "@/lib/utils"
+import { HamburgerIcon, Logo } from "@/components/svg/svg";
 
 
 const Break = ()=> <hr className={cn("w-100")}></hr>
@@ -39,12 +40,12 @@ const Navbar = ()=>{
             <Break/>
             <nav className="flex items-center justify-between flex-wrap bg-666666 p-6">
                 <div className="flex items-center flex-shrink-0 text-white mr-6">
-                    <svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fill-rule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fill-rule="evenodd"/></svg>
+                    <HamburgerIcon/>
                     <span className="font-semibold text-xl tracking-tight">Wretched Machines</span>
                 </div>
                 <div className="block lg:hidden">
                     <button className="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white">
-                    <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                    <Logo/>
                     </button>
                 </div>
                 <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">