81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { FC } from 'react';
|
|
|
|
interface CGSelectProps {
|
|
minCG: number;
|
|
maxCG: number;
|
|
value: number;
|
|
disabled: boolean;
|
|
increase: () => void;
|
|
decrease: () => void;
|
|
}
|
|
|
|
const CGSelect: FC<CGSelectProps> = ({ minCG, maxCG, value, disabled, increase, decrease }) => {
|
|
return (
|
|
<div className="relative">
|
|
<input
|
|
disabled
|
|
className="w-full rounded-lg border border-white bg-zinc-700 px-3 py-2 text-white shadow-sm focus:border-blue-600 focus:outline-none focus:ring-blue-600"
|
|
value={value.toFixed(1)}
|
|
/>
|
|
<button
|
|
disabled={disabled || value <= minCG}
|
|
className="absolute right-2 top-0 -mt-[.5px] border-t bg-zinc-700 text-white disabled:text-zinc-400"
|
|
onClick={increase}
|
|
>
|
|
{/* FIXME: FONTAWESOME IN EFB */}
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
data-prefix="fas"
|
|
data-icon="caret-up"
|
|
className="svg-inline--fa fa-caret-up "
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 320 512"
|
|
style={{
|
|
height: '1em',
|
|
verticalAlign: '-0.125em',
|
|
display: 'inline-block',
|
|
boxSizing: 'content-box',
|
|
}}
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
disabled={disabled || value >= maxCG}
|
|
className="absolute bottom-0 right-2 -mt-[.5px] border-b bg-zinc-700 text-white disabled:text-zinc-400"
|
|
onClick={decrease}
|
|
>
|
|
{/* FIXME: FONTAWESOME IN EFB */}
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
data-prefix="fas"
|
|
data-icon="caret-down"
|
|
className="svg-inline--fa fa-caret-down "
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 320 512"
|
|
style={{
|
|
height: '1em',
|
|
verticalAlign: '-0.125em',
|
|
display: 'inline-block',
|
|
boxSizing: 'content-box',
|
|
}}
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CGSelect;
|