44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import { setTempSize } from 'store'
|
|
|
|
import { formatNumber } from 'utils'
|
|
|
|
import { useAppDispatch, useAppSelector } from 'hooks'
|
|
|
|
const SelectSize = props => {
|
|
//? Props
|
|
const { sizes } = props
|
|
|
|
//? Assets
|
|
const dispatch = useAppDispatch()
|
|
|
|
//? Store
|
|
const { tempSize } = useAppSelector(state => state.cart)
|
|
|
|
//? Render(s)
|
|
return (
|
|
<section className="">
|
|
<div className="flex justify-between p-4">
|
|
<span className="text-sm text-gray-700">尺寸: {tempSize?.size}</span>
|
|
<span className="text-sm">{formatNumber(sizes.length)} 尺寸</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-y-3 space-x-3 px-5 my-3">
|
|
{sizes.map(item => (
|
|
<button
|
|
type="button"
|
|
key={item.id}
|
|
onClick={() => dispatch(setTempSize(item))}
|
|
className={`rounded-full py-1.5 px-2 flex items-center cursor-pointer ${
|
|
tempSize?.id === item.id ? 'border-2 border-sky-500' : ' border-2 border-gray-300'
|
|
}`}
|
|
>
|
|
<span>{item.size}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="section-divide-y" />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default SelectSize
|