feat: icons

package.json

@@ -29,6 +29,11 @@
     "url": "https://github.com/owner/project/issues"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/common/constants.ts

@@ -0,0 +1,5 @@
+export const STANDARDIZATION_COLOR = {
+  as568: "#FF0000",
+  jis: "#00FF00",
+  metric: "#0000FF",
+} as const;

src/components/common/icons.tsx

@@ -0,0 +1,12 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircle } from "@fortawesome/free-regular-svg-icons";
+import { faLanguage,faEraser } from "@fortawesome/free-solid-svg-icons";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+function iconFactory(icon: IconProp): React.FC {
+  return () => <FontAwesomeIcon icon={icon} />;
+}
+
+export const IconCircle = iconFactory(faCircle);
+export const IconLanguage = iconFactory(faLanguage);
+export const IconEraser = iconFactory(faEraser)

src/components/common/index.ts

@@ -3,3 +3,5 @@ export * from "./styles";
 export * from "./labelWrapper";
 export * from "./types";
 export * from "./names";
+export * from "./icons";
+export * from "./constants";

src/components/header/languageDropdown.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { IconLanguage } from "components/common";
 
 export default function LanguageDropdown() {
   const { i18n, t } = useTranslation("global");
@@ -17,27 +18,29 @@ export default function LanguageDropdown() {
         data-bs-toggle="dropdown"
         aria-expanded="false"
       >
-        <small>{t("langSelect.display")}</small>
+        <IconLanguage />
+
+        {/* <small>{t("langSelect.display")}</small> */}
       </button>
       <ul className="dropdown-menu dropdown-menu-end ">
         <li>
           <button
             className={`dropdown-item ${
-              i18n.language === "en" ? "active" : ""
+              i18n.language === "en" ? "disabled" : ""
             }`}
             onClick={() => changeLanguage("en")}
           >
-            English
+            🇬🇧 English
           </button>
         </li>
         <li>
           <button
             className={`dropdown-item ${
-              i18n.language === "id" ? "active" : ""
+              i18n.language === "id" ? "disabled" : ""
             }`}
             onClick={() => changeLanguage("id")}
           >
-            Indonesian
+            🇮🇩 Indonesia
           </button>
         </li>
       </ul>

src/components/header/navBar.tsx

@@ -3,16 +3,23 @@ import LanguageDropdown from "./languageDropdown";
 import { useTranslation } from "react-i18next";
 export function NavBar() {
   const { t } = useTranslation("global");
+  const handleScrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth", // Adds a smooth scrolling effect
+    });
+  };
   return (
     <nav className="navbar bg-primary shadow-sm sticky-top">
       <div className="container">
         <h2
           className=" ms-2 "
           style={{
             color: "#1375AC",
-
             textShadow: "#54b2e9 1px 1px 0",
+            cursor: "pointer",
           }}
+          onClick={handleScrollToTop}
         >
           {t("header.title")}
         </h2>

yarn.lock

@@ -1228,6 +1228,46 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/[email protected]":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz"
+  integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
+
+"@fortawesome/fontawesome-svg-core@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz"
+  integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-brands-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz"
+  integrity sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-regular-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz"
+  integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/free-solid-svg-icons@^6.7.2":
+  version "6.7.2"
+  resolved "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz"
+  integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.2"
+
+"@fortawesome/react-fontawesome@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz"