Make generic TableField and move styles
This is so we have a base for other table rows that use different interactive elements
This commit is contained in:
parent
1e59d767ba
commit
82ec214b5d
4 changed files with 188 additions and 155 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)}>
|
||||
<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>
|
||||
<Select
|
||||
name={props.name}
|
||||
open={props.open}
|
||||
onOpenChange={props.onOpenChange}
|
||||
onValueChange={props.onChange}
|
||||
onClose={props.onClose}
|
||||
triggerClass={classNames({ Bound: true, Table: true })}
|
||||
value={value}
|
||||
overlayVisible={false}
|
||||
>
|
||||
{props.children}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<TableField
|
||||
name={props.name}
|
||||
imageAlt={props.imageAlt}
|
||||
imageClass={props.imageClass}
|
||||
imageSrc={props.imageSrc}
|
||||
label={props.label}
|
||||
>
|
||||
<Select
|
||||
name={props.name}
|
||||
open={props.open}
|
||||
onOpenChange={props.onOpenChange}
|
||||
onValueChange={props.onChange}
|
||||
onClose={props.onClose}
|
||||
triggerClass={classNames({ Bound: true, Table: true })}
|
||||
value={value}
|
||||
overlayVisible={false}
|
||||
>
|
||||
{props.children}
|
||||
</Select>
|
||||
</TableField>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
119
components/TableField/index.scss
Normal file
119
components/TableField/index.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
components/TableField/index.tsx
Normal file
48
components/TableField/index.tsx
Normal file
|
|
@ -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
|
||||
Loading…
Reference in a new issue