refactor(controlbar): 🎉 add controlbar with functions flow

.github/workflows/docker.yaml

@@ -4,7 +4,6 @@ on:
   push:
     tags:
       - "*"
-
 jobs:
   build:
     runs-on: ubuntu-latest

public/css/style.css

@@ -729,6 +729,16 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -880,3 +890,8 @@ video {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}

src/components/ConnectionStatus/ConnectionStatus.tsx

@@ -15,7 +15,7 @@ export default function ConnectionStatus(): ReactElement {
             : "bg-red-500"
         }`}
       />
-      <p className="text-sm">
+      <p className="text-xs">
         {connectionStatus === null
           ? "Pending"
           : connectionStatus

src/components/ControBarArrow/ControBarArrow.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
+
+interface IControlBarArrow {
+  isOpened: boolean;
+  onClick: () => void;
+}
+
+export default function ControlBarArrow({
+  isOpened,
+  onClick,
+}: IControlBarArrow): ReactElement {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center justify-center border border-gray-200 bg-white py-0.5 px-2 rounded-t cursor-pointer"
+    >
+      {isOpened ? <MdKeyboardArrowDown /> : <MdKeyboardArrowUp />}
+    </button>
+  );
+}

src/components/ControlBar/ControlBar.tsx

@@ -1,23 +1,17 @@
-import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
-import WebsocketInput from "../WebsocketInput/WebsocketInput";
+import ControlBarArrow from "../ControBarArrow/ControBarArrow";
+import ControlBarBody from "../ControlBarBody/ControlBarBody";
 import { ReactElement, useState } from "react";
 
 export default function ControlBar(): ReactElement {
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
   return (
     <div className="absolute bottom-0 left-1/2 right-1/2 flex flex-col items-center">
-      <button
+      <ControlBarArrow
+        isOpened={isOpened}
         onClick={() => setIsOpened(!isOpened)}
-        className="flex items-center justify-center bg-slate-50 py-0.5 px-2 rounded-t cursor-pointer border border-slate-300"
-      >
-        {isOpened ? <MdKeyboardArrowDown /> : <MdKeyboardArrowUp />}
-      </button>
-      {isOpened && (
-        <div className="flex gap-4 bg-slate-50 py-2 px-4 rounded-t border border-slate-300">
-          <WebsocketInput />
-        </div>
-      )}
+      />
+      {isOpened && <ControlBarBody />}
     </div>
   );
 }

src/components/ControlBarBody/ControlBarBody.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import WebsocketInput from "../WebsocketInput/WebsocketInput";
+
+export default function ControlBarBody(): ReactElement {
+  return (
+    <div className="flex gap-4 bg-white py-2 px-4 rounded-t border border-gray-200">
+      <WebsocketInput />
+    </div>
+  );
+}

src/components/InputText/InputText.tsx

@@ -15,7 +15,7 @@ export default function InputText({
     <label className="flex items-center gap-2">
       <p>{label}</p>
       <input
-        className="border border-slate-400 rounded h-8 p-1"
+        className="border border-slate-300 rounded h-8 p-1"
         type="text"
         value={value}
         onChange={onChange}

src/components/WebsocketInput/WebsocketInput.tsx

@@ -3,7 +3,7 @@ import InputText from "../InputText/InputText";
 import {
   getWebSocketURL,
   setWebSocketURL,
-} from "../../functions/websocket.interface";
+} from "../../functions/websocket.function";
 
 export default function WebsocketInput(): ReactElement {
   const [value, setValue] = useState<string>(getWebSocketURL());

src/contexts/BarcodeContext.tsx

@@ -1,4 +1,4 @@
-import { getWebSocketURL } from "../functions/websocket.interface";
+import { getWebSocketURL } from "../functions/websocket.function";
 import { IBarcodeItem } from "../interfaces/barcode.interface";
 import { createContext, useEffect, useState } from "react";
 import ROSLIB from "roslib";