ASC 60: Button Implementation

package.json

@@ -38,4 +38,4 @@
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }
-}
+}

src/App.tsx

@@ -1,11 +1,9 @@
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 // routes
 import NavigaionTest from "./routes/NavigationTest";
 import Test from "@/routes/Test";
+import ButtonTestRoute from "./routes/ButtonTestRoute";
 
 const router = createBrowserRouter([
   {
@@ -16,6 +14,10 @@ const router = createBrowserRouter([
     path: "/test",
     element: <Test />,
   },
+  {
+    path: "/testButton",
+    element: <ButtonTestRoute />,
+  },
   {
     path: "/nav-test",
     element: <NavigaionTest />,

src/components/Button.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Plus } from "@phosphor-icons/react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick?: () => void;
+  icon?: boolean;
+  text?: string;
+  rounded?: boolean;
+  fill?: boolean;
+  status?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  text = null,
+  icon = false,
+  onClick = () => console.log("Clicked"),
+  rounded = false,
+  fill = true,
+  status = true,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [fontSize, setFontSize] = useState("1em");
+
+  useEffect(() => {
+    if (text) {
+      const width = buttonRef.current?.offsetWidth;
+
+      // size adjustment could be error since hand adjusted it
+      // probably adjust it later or ask for advise
+      if (width) {
+        if (width > 200) {
+          setFontSize(`${width / 14}px`);
+        } else if (width > 100) {
+          setFontSize(`${width / 11}px`);
+        } else {
+          setFontSize(`${width / 7}px`);
+        }
+      }
+    }
+  }, [text]);
+  const buttonClassName = `flex flex-row items-center justify-center p-4 ${
+    !status
+      ? "bg-neutrals-light-200 text-gray-400"
+      : fill
+      ? "bg-primary-main text-white"
+      : "text-primary-dark border-primary-dark border-2"
+  } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`;
+
+  return (
+    <button
+      ref={buttonRef}
+      style={{ fontSize }}
+      onClick={onClick}
+      className={buttonClassName}
+      disabled={!status}
+    >
+      {icon && !text && <Plus className="" />}
+      {icon && text && (
+        <>
+          <Plus className="mt-0.2" />
+          <span className="pl-1">{text}</span>
+        </>
+      )}
+      {!icon && text && <span>{text}</span>}
+    </button>
+  );
+};
+
+export default Button;

src/routes/ButtonTestRoute.tsx

@@ -0,0 +1,196 @@
+import Button from "../components/Button";
+
+function ButtonTestRoute() {
+  return (
+    <div className="space-x-4 flex flex-row">
+      <div className="space-y-4 flex flex-col justify-center items-center min-h-screen">
+        <div className="w-64 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={false}
+            icon={true}
+          />
+        </div>
+        <div className="w-48 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={false}
+            icon={false}
+          />
+        </div>
+        <div className="w-22 h-8">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={false}
+            icon={true}
+          />
+        </div>
+        <div className="w-22 h-8">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={false}
+            icon={false}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={false}
+            fill={true}
+            status={false}
+            icon={true}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={true}
+            fill={true}
+            status={false}
+            icon={true}
+          />
+        </div>
+      </div>
+      <div className="space-y-4 flex flex-col justify-center items-center min-h-screen">
+        <div className="w-64 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={true}
+            icon={true}
+          />
+        </div>
+        <div className="w-48 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={true}
+            icon={false}
+          />
+        </div>
+        <div className="w-48 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={true}
+            status={true}
+            icon={true}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={false}
+            fill={true}
+            status={true}
+            icon={true}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={true}
+            fill={true}
+            status={true}
+            icon={true}
+          />
+        </div>
+      </div>
+      <div className="space-y-4 flex flex-col justify-center items-center min-h-screen">
+        <div className="w-64 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={false}
+            status={true}
+            icon={true}
+          />
+        </div>
+        <div className="w-48 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={"Button"}
+            rounded={false}
+            fill={false}
+            status={true}
+            icon={false}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={false}
+            fill={false}
+            status={true}
+            icon={true}
+          />
+        </div>
+        <div className="w-12 h-12">
+          <Button
+            onClick={function (): void {
+              throw new Error("Function not implemented.");
+            }}
+            text={""}
+            rounded={true}
+            fill={false}
+            status={true}
+            icon={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ButtonTestRoute;

tsconfig.json

@@ -9,7 +9,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
+    "module": "ESNext", 
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -22,4 +22,4 @@
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
+}