feat(directory): add serach box

directory/src/component/scss/dropdown.module.scss

@@ -64,10 +64,10 @@
   }
 
   .menu {
+    scrollbar-gutter: stable;
     opacity: 0;
     position: absolute;
     background-color: var(--root-background-color);
-    min-width: 38.2vw;
     width: max-content;
     max-height: 61.8vh;
     max-width: 61.8vw;

directory/src/component/scss/search_box.module.scss

@@ -0,0 +1,77 @@
+.search-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin: 0.5rem;
+
+  .icon {
+    position: absolute;
+    width: 0.8rem;
+    height: 0.8rem;
+    display: inline-block;
+    vertical-align: middle;
+    border-left: 0.15em solid var(--text-color-full);
+    border-bottom: 0.15em solid var(--text-color-full);
+    border-right: 0.15em solid var(--text-color-full);
+    border-top: 0.15em solid var(--text-color-full);
+    transform: translate(0rem, 0.2rem) rotate(-45deg);
+  }
+
+  .icon_dot {
+    position: absolute;
+    background-color: var(--text-color-full);
+    width: 0.1em;
+    height: 0.4em;
+    transform: translate(1.2rem, 1.2rem) rotate(-45deg);
+  }
+
+  .input {
+    flex-grow: 1;
+    font-size: 1.5rem;
+    width: 100%;
+    margin-left: 2rem;
+    padding-right: 2rem;
+    background-color: transparent;
+    border: unset;
+    border-bottom: 0.15em solid var(--home-item-outline-color);
+    color: var(--text-color);
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+  }
+
+  .input:focus, .input:hover {
+    outline: none;
+    border-bottom: 0.15em solid var(--text-color);
+  }
+
+  .icon_clear {
+    position: absolute;
+    right: 1rem;
+    width: 2rem;
+    height: 2rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+    visibility: hidden;
+
+    &.active {
+      opacity: 1;
+      visibility: unset;
+    }
+
+    .line {
+      position: absolute;
+      width: 2rem;
+      height: 0.2rem;
+      background-color: var(--text-color);
+
+      &:nth-child(1) {
+        transform: translate(0rem, 0.8rem) rotate(45deg);
+      }
+
+      &:nth-child(2) {
+        transform: translate(0rem, 0.8rem) rotate(-45deg);
+      }
+    }
+  }
+}

directory/src/component/search_box.jsx

@@ -0,0 +1,49 @@
+import React, {
+  useState,
+} from 'react'
+import PropTypes from 'prop-types';
+import classes from './scss/search_box.module.scss'
+import { useI18n } from '@/state/language';
+
+export default function SearchBox(props) {
+  const { i18n } = useI18n()
+  const [searchField, setSearchField] = useState('');
+
+  const filterBySearch = (event) => {
+    const query = event.target.value;
+    props.handleOnChange(query);
+    setSearchField(query);
+  };
+
+  return (
+    <>
+      <section className={`${classes['search-box']} ${props.className ? props.className : ''}`}>
+        <section className={classes.icon} />
+        <section className={classes.icon_dot} />
+        <input
+          type="text"
+          className={classes.input}
+          placeholder={i18n(props.altText)}
+          onChange={filterBySearch}
+          value={searchField} />
+        <section
+          className={`${classes.icon_clear} ${searchField === '' ? '' : classes.active}`}
+          onClick={() => {
+            setSearchField('');
+            props.handleOnChange('');
+          }}
+        >
+          <section className={classes.line} />
+          <section className={classes.line} />
+        </section>
+      </section>
+    </>
+  )
+}
+SearchBox.propTypes = {
+  className: PropTypes.string,
+  text: PropTypes.string,
+  altText: PropTypes.string,
+  handleOnChange: PropTypes.func,
+  searchField: PropTypes.string,
+};