feat: oidc config

src/common/component/styled/Input.js

@@ -58,7 +58,7 @@ const StyledInput = styled.input`
     background-color: #f9fafb;
   }
   &::placeholder {
-    color: #78787c;
+    color: #d1d5db;
   }
   &[type="password"] {
     padding-right: 30px;

src/common/component/styled/Menu.js

@@ -23,7 +23,6 @@ const StyledMenu = styled.ul`
     font-size: 14px;
     line-height: 20px;
     color: #616161;
-
     .icon {
       width: 20px;
       height: 20px;
@@ -65,6 +64,14 @@ const StyledMenu = styled.ul`
         color: #fff;
       }
     }
+    &[data-disabled="true"] {
+      color: #a4a8b3;
+      .icon {
+        path {
+          fill: #a4a8b3;
+        }
+      }
+    }
   }
 `;
 

src/common/component/styled/Select.js

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import IconSelect from "../../../assets/icons/check.sign.svg";
+import IconArrow from "../../../assets/icons/arrow.down.svg";
+import Menu from "./Menu";
+const Styled = styled.div`
+  user-select: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  .txt {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    color: #475467;
+    min-width: 76px;
+  }
+  > .icon {
+    width: 20px !important;
+    height: 20px !important;
+  }
+`;
+export default function Select({ options = [], updateSelect = null }) {
+  const [optionsVisible, setOptionsVisible] = useState(false);
+  const [curr, setCurr] = useState(undefined);
+  const toggleVisible = () => {
+    setOptionsVisible((prev) => !prev);
+  };
+  const handleSelect = (data) => {
+    setCurr(data);
+    toggleVisible();
+    if (updateSelect) {
+      updateSelect(data);
+    }
+  };
+  return (
+    <Tippy
+      trigger="click"
+      visible={optionsVisible}
+      placement="bottom"
+      interactive
+      content={
+        <Menu>
+          {options.map(({ title, value, selected, underline }) => {
+            return (
+              <li
+                onClick={
+                  selected ? null : handleSelect.bind(null, { title, value })
+                }
+                className={`item sb ${underline ? "underline" : ""}`}
+                data-disabled={selected}
+                key={value}
+              >
+                {title}
+                {selected && <IconSelect className="icon" />}
+              </li>
+            );
+          })}
+        </Menu>
+      }
+    >
+      <Styled onClick={toggleVisible}>
+        <span className="txt">{curr?.title || `Select`}</span>
+        <IconArrow className="icon" />
+      </Styled>
+    </Tippy>
+  );
+}