From b8e876d59f63e49c7a625eba94c15690620337fa Mon Sep 17 00:00:00 2001 From: Jastria Rahmat Date: Wed, 25 Dec 2024 16:48:31 +0700 Subject: [PATCH] feat: icons --- package-lock.json | 120 +++++++++++++++++++++ package.json | 5 + src/components/common/constants.ts | 5 + src/components/common/icons.tsx | 12 +++ src/components/common/index.ts | 2 + src/components/header/languageDropdown.tsx | 13 ++- src/components/header/navBar.tsx | 9 +- yarn.lock | 40 +++++++ 8 files changed, 200 insertions(+), 6 deletions(-) create mode 100644 src/components/common/constants.ts create mode 100644 src/components/common/icons.tsx diff --git a/package-lock.json b/package-lock.json index 91c6cfc..3014a83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,11 @@ "version": "2.2.2", "license": "LGPL-3.0-or-later", "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", @@ -2274,6 +2279,76 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "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==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "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==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "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==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "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==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "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==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", @@ -25353,6 +25428,51 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "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": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.7.2" + } + }, + "@fortawesome/free-brands-svg-icons": { + "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==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.7.2" + } + }, + "@fortawesome/free-regular-svg-icons": { + "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==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.7.2" + } + }, + "@fortawesome/free-solid-svg-icons": { + "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==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.7.2" + } + }, + "@fortawesome/react-fontawesome": { + "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==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", diff --git a/package.json b/package.json index 15a0205..09812dd 100644 --- a/package.json +++ b/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", diff --git a/src/components/common/constants.ts b/src/components/common/constants.ts new file mode 100644 index 0000000..1fa578c --- /dev/null +++ b/src/components/common/constants.ts @@ -0,0 +1,5 @@ +export const STANDARDIZATION_COLOR = { + as568: "#FF0000", + jis: "#00FF00", + metric: "#0000FF", +} as const; diff --git a/src/components/common/icons.tsx b/src/components/common/icons.tsx new file mode 100644 index 0000000..d43f691 --- /dev/null +++ b/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 () => ; +} + +export const IconCircle = iconFactory(faCircle); +export const IconLanguage = iconFactory(faLanguage); +export const IconEraser = iconFactory(faEraser) \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 9e493c9..fe17626 100644 --- a/src/components/common/index.ts +++ b/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"; diff --git a/src/components/header/languageDropdown.tsx b/src/components/header/languageDropdown.tsx index 5a00157..5784541 100644 --- a/src/components/header/languageDropdown.tsx +++ b/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" > - {t("langSelect.display")} + + + {/* {t("langSelect.display")} */}
diff --git a/src/components/header/navBar.tsx b/src/components/header/navBar.tsx index 9320e4e..b7163a4 100644 --- a/src/components/header/navBar.tsx +++ b/src/components/header/navBar.tsx @@ -3,6 +3,12 @@ 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 (