Make generic TableField and move styles

This is so we have a base for other table rows that use different interactive elements

components/SelectTableField/index.scss

@@ -1,116 +0,0 @@
-.TableField {
-  align-items: center;
-  display: grid;
-  gap: $unit-2x;
-  grid-template-columns: 1fr auto;
-
-  @include breakpoint(phone) {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .Left {
-    display: flex;
-    flex-direction: row;
-    gap: $unit;
-    width: 100%;
-
-    .Info {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      justify-content: center;
-      gap: $unit-half;
-    }
-
-    .Image {
-      display: none;
-
-      .preview {
-        $diameter: $unit-5x;
-        width: $diameter;
-        height: $diameter;
-
-        img {
-          width: $diameter;
-          height: $diameter;
-        }
-      }
-
-      @include breakpoint(phone) {
-        display: block;
-      }
-    }
-
-    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;
-      }
-    }
-  }
-
-  .Right {
-    display: flex;
-    flex-direction: row;
-    gap: $unit-2x;
-    width: 100%;
-
-    @include breakpoint(phone) {
-      .Image {
-        display: none;
-      }
-    }
-
-    .SelectTrigger {
-      width: 100%;
-    }
-  }
-
-  .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

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 import Select from '~components/Select'
+import TableField from '~components/TableField'
 
 import './index.scss'
 
@@ -27,46 +28,27 @@ const SelectTableField = (props: Props) => {
     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)}>
+    <TableField
-      <div className="Left">
+      name={props.name}
-        <div className="Info">
+      imageAlt={props.imageAlt}
-          <h3>{props.label}</h3>
+      imageClass={props.imageClass}
-          <p>{props.description}</p>
+      imageSrc={props.imageSrc}
-        </div>
+      label={props.label}
-        <div className="Image">{image()}</div>
+    >
-      </div>
+      <Select
-
+        name={props.name}
-      <div className="Right">
+        open={props.open}
-        <div className="Image">{image()}</div>
+        onOpenChange={props.onOpenChange}
-        <Select
+        onValueChange={props.onChange}
-          name={props.name}
+        onClose={props.onClose}
-          open={props.open}
+        triggerClass={classNames({ Bound: true, Table: true })}
-          onOpenChange={props.onOpenChange}
+        value={value}
-          onValueChange={props.onChange}
+        overlayVisible={false}
-          onClose={props.onClose}
+      >
-          triggerClass={classNames({ Bound: true, Table: true })}
+        {props.children}
-          value={value}
+      </Select>
-          overlayVisible={false}
+    </TableField>
-        >
-          {props.children}
-        </Select>
-      </div>
-    </div>
   )
 }
 

components/TableField/index.scss

@@ -0,0 +1,119 @@
+.TableField {
+  align-items: center;
+  display: grid;
+  gap: $unit-2x;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  width: 100%;
+
+  @include breakpoint(phone) {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .Left {
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    width: 100%;
+
+    .Info {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: center;
+      gap: $unit-half;
+    }
+
+    .Image {
+      display: none;
+
+      .preview {
+        $diameter: $unit-5x;
+        width: $diameter;
+        height: $diameter;
+
+        img {
+          width: $diameter;
+          height: $diameter;
+        }
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
+
+    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;
+      }
+    }
+  }
+
+  .Right {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit-2x;
+    width: 100%;
+
+    @include breakpoint(phone) {
+      .Image {
+        display: none;
+      }
+    }
+
+    .SelectTrigger {
+      width: 100%;
+    }
+  }
+
+  .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/TableField/index.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import './index.scss'
+
+interface Props {
+  name: string
+  label: string
+  description?: string
+  className?: string
+  imageAlt?: string
+  imageClass?: string
+  imageSrc?: string[]
+  children: React.ReactNode
+}
+
+const TableField = (props: Props) => {
+  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">
+        <div className="Info">
+          <h3>{props.label}</h3>
+          <p>{props.description}</p>
+        </div>
+        <div className="Image">{image()}</div>
+      </div>
+
+      <div className="Right">
+        <div className="Image">{image()}</div>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default TableField