forked from M-Labs/web2019
37 lines
1.7 KiB
React
37 lines
1.7 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
import {useShopStore} from "./shop_store";
|
||
|
|
import {Tip} from "./options/components/Tip";
|
||
|
|
import {formatMoney} from "./utils";
|
||
|
|
|
||
|
|
export function CrateFanTray({crate_index}) {
|
||
|
|
const currency = useShopStore((state) => state.currency);
|
||
|
|
const fanTray = useShopStore((state) => state.fanTray);
|
||
|
|
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
||
|
|
const fanTrayAvailable = useShopStore((state) => state.fanTrayAvailableByIndex(crate_index));
|
||
|
|
const fanTrayEnabled = useShopStore((state) => state.crates[crate_index].fan_tray);
|
||
|
|
const updateFanTray = useShopStore((state) => state.updateFanTrayOption);
|
||
|
|
|
||
|
|
const base_id = crate_id + "fan_tray";
|
||
|
|
return fanTrayAvailable ? (
|
||
|
|
<div className="crate-bar">
|
||
|
|
<div className="shop-switch">
|
||
|
|
<div className="form-check form-switch">
|
||
|
|
<input
|
||
|
|
className="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
role="switch"
|
||
|
|
id={base_id}
|
||
|
|
checked={fanTrayEnabled}
|
||
|
|
onClick={() => updateFanTray(crate_id, !fanTrayEnabled)}
|
||
|
|
onChange={() => updateFanTray(crate_id, !fanTrayEnabled)}
|
||
|
|
/>
|
||
|
|
<label className="form-check-label" htmlFor={base_id} style={{"display": "inline", marginRight: "0.125rem"}}>
|
||
|
|
{fanTray.optionTitle} (+{`${currency} ${formatMoney(fanTray.price)}`})
|
||
|
|
</label>
|
||
|
|
{fanTray.tip && <Tip id={base_id + "tooltip"} tip={fanTray.tip}/>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : null
|
||
|
|
}
|