Add SelectTableField

components/SelectTableField/index.scss

@@ -0,0 +1,69 @@
+.TableField {
+  align-items: center;
+  display: grid;
+  gap: $unit * 2;
+  grid-template-columns: 1fr auto;
+
+  &.Image {
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  .Left {
+    display: flex;
+    flex-direction: column;
+    gap: calc($unit / 2);
+
+    label {
+      color: var(--text-tertiary);
+      font-size: $font-regular;
+    }
+
+    p {
+      color: var(--text-secondary);
+      font-size: $font-small;
+      line-height: 1.1;
+      max-width: 300px;
+
+      &.jp {
+        max-width: 270px;
+      }
+    }
+  }
+
+  .preview {
+    $diameter: $unit * 6;
+    background-color: $grey-90;
+    border-radius: 999px;
+    height: $diameter;
+    width: $diameter;
+
+    img {
+      height: $diameter;
+      width: $diameter;
+    }
+
+    &.fire {
+      background: $fire-bg-20;
+    }
+
+    &.water {
+      background: $water-bg-20;
+    }
+
+    &.wind {
+      background: $wind-bg-20;
+    }
+
+    &.earth {
+      background: $earth-bg-20;
+    }
+
+    &.dark {
+      background: $dark-bg-10;
+    }
+
+    &.light {
+      background: $light-bg-20;
+    }
+  }
+}

components/SelectTableField/index.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+import Select from '~components/Select'
+
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  open: boolean
+  value?: string
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  children: React.ReactNode
+  onClick: () => void
+  onChange: (value: string) => void
+}
+
+const SelectTableField = (props: Props) => {
+  const [value, setValue] = useState('')
+
+  useEffect(() => {
+    if (props.value) setValue(props.value)
+  }, [props.value])
+
+  const image = () => {
+    return props.imageSrc && props.imageSrc.length > 0 ? (
+      <div className={`preview ${props.imageClass}`}>
+        <img
+          alt={props.imageAlt}
+          srcSet={props.imageSrc.join(', ')}
+          src={props.imageSrc[0]}
+        />
+      </div>
+    ) : (
+      ''
+    )
+  }
+
+  return (
+    <div className={classNames({ TableField: true }, props.className)}>
+      <div className="Left">
+        <h3>{props.label}</h3>
+        <p>{props.description}</p>
+      </div>
+
+      {image()}
+
+      <div className="Right">
+        <Select
+          name={props.name}
+          open={props.open}
+          onClick={props.onClick}
+          onValueChange={props.onChange}
+          triggerClass={classNames({ Bound: true, Table: true })}
+          value={value}
+        >
+          {props.children}
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+export default SelectTableField