feat: create tab and selector components

inertia/components/common/form/selector.tsx

@@ -0,0 +1,79 @@
+import { useTheme } from '@emotion/react';
+import { InputHTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import Select, {
+  FormatOptionLabelMeta,
+  GroupBase,
+  OptionsOrGroups,
+} from 'react-select';
+import FormField from '~/components/common/form/_form_field';
+
+type Option = { label: string | number; value: string | number };
+
+interface SelectorProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  label: string;
+  name: string;
+  errors?: string[];
+  options: OptionsOrGroups<Option, GroupBase<Option>>;
+  value: number | string;
+  onChangeCallback?: (value: number | string) => void;
+  formatOptionLabel?: (
+    data: Option,
+    formatOptionLabelMeta: FormatOptionLabelMeta<Option>
+  ) => ReactNode;
+}
+
+export default function Selector({
+  name,
+  label,
+  value,
+  errors = [],
+  options,
+  onChangeCallback,
+  formatOptionLabel,
+  required = false,
+  ...props
+}: SelectorProps): JSX.Element {
+  const theme = useTheme();
+  const [selectorValue, setSelectorValue] = useState<Option>();
+
+  useEffect(() => {
+    if (options.length === 0) return;
+
+    const option = options.find((o: any) => o.value === value);
+    if (option) {
+      setSelectorValue(option as Option);
+    }
+  }, [options, value]);
+
+  const handleChange = (selectedOption: Option) => {
+    setSelectorValue(selectedOption);
+    if (onChangeCallback) {
+      onChangeCallback(selectedOption.value);
+    }
+  };
+
+  return (
+    <FormField required={required}>
+      {label && (
+        <label htmlFor={name} title={`${name} field`}>
+          {label}
+        </label>
+      )}
+      <Select
+        value={selectorValue}
+        onChange={(newValue) => handleChange(newValue as Option)}
+        options={options}
+        isDisabled={props.disabled}
+        menuPlacement="auto"
+        formatOptionLabel={
+          formatOptionLabel
+            ? (val, formatOptionLabelMeta) =>
+                formatOptionLabel(val, formatOptionLabelMeta)
+            : undefined
+        }
+        css={{ color: theme.colors.black }}
+      />
+    </FormField>
+  );
+}

inertia/components/common/modal/_modal_body.tsx

@@ -6,7 +6,6 @@ const ModalBody = styled.div({
   flex: 1,
   alignItems: 'center',
   flexDirection: 'column',
-  overflow: 'auto',
 });
 
 export default ModalBody;

inertia/components/common/modal/_modal_container.tsx

@@ -3,7 +3,7 @@ import TransitionLayout from '~/components/layouts/_transition_layout';
 
 const ModalContainer = styled(TransitionLayout)(({ theme }) => ({
   minWidth: '500px',
-  background: theme.colors.secondary,
+  background: theme.colors.background,
   padding: '1em',
   borderRadius: theme.border.radius,
   marginTop: '6em',

inertia/components/common/tabs/tab_item.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import { rgba } from '~/lib/color';
+
+const TabItem = styled.li<{ active?: boolean; danger?: boolean }>(
+  ({ theme, active, danger }) => {
+    const activeColor = !danger ? theme.colors.primary : theme.colors.lightRed;
+    return {
+      userSelect: 'none',
+      cursor: 'pointer',
+      backgroundColor: active
+        ? rgba(activeColor, 0.15)
+        : theme.colors.secondary,
+      padding: '10px 20px',
+      border: `1px solid ${active ? rgba(activeColor, 0.1) : theme.colors.secondary}`,
+      borderBottom: `1px solid ${active ? rgba(activeColor, 0.25) : theme.colors.secondary}`,
+      display: 'flex',
+      gap: '0.35em',
+      alignItems: 'center',
+      transition: '.075s',
+    };
+  }
+);
+
+export default TabItem;

inertia/components/common/tabs/tab_list.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const TabList = styled.ul({
+  padding: 0,
+  margin: 0,
+  display: 'flex',
+  listStyle: 'none',
+});
+
+export default TabList;

inertia/components/common/tabs/tab_panel.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { rgba } from '~/lib/color';
+
+const TabPanel = styled.div(({ theme }) => ({
+  zIndex: 1,
+  position: 'relative',
+  border: `1px solid ${rgba(theme.colors.primary, 0.25)}`,
+  padding: '20px',
+  marginTop: '-1px',
+}));
+
+export default TabPanel;

inertia/components/common/tabs/tabs.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, useState } from 'react';
+import { IconType } from 'react-icons/lib';
+import TabItem from '~/components/common/tabs/tab_item';
+import TabList from '~/components/common/tabs/tab_list';
+import TabPanel from '~/components/common/tabs/tab_panel';
+import TransitionLayout from '~/components/layouts/_transition_layout';
+
+export interface Tab {
+  title: string;
+  content: ReactNode;
+  icon?: IconType;
+  danger?: boolean;
+}
+
+export default function Tabs({ tabs }: { tabs: Tab[] }) {
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+
+  const handleTabClick = (index: number) => {
+    setActiveTabIndex(index);
+  };
+
+  return (
+    <div css={{ width: '100%' }}>
+      <TabList>
+        {tabs.map(({ title, icon: Icon, danger }, index) => (
+          <TabItem
+            key={index}
+            active={index === activeTabIndex}
+            onClick={() => handleTabClick(index)}
+            danger={danger ?? false}
+          >
+            {!!Icon && <Icon size={20} />}
+            {title}
+          </TabItem>
+        ))}
+      </TabList>
+      <TabPanel key={tabs[activeTabIndex].title}>
+        <TransitionLayout>{tabs[activeTabIndex].content}</TransitionLayout>
+      </TabPanel>
+    </div>
+  );
+}