48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import type { AddonData } from '../types';
|
||
import { addonPriceForDevices, formatMoney } from '../lib/format';
|
||
|
||
interface AddonListProps {
|
||
addons: AddonData[];
|
||
devices: number;
|
||
selected: string[];
|
||
onToggle: (id: string) => void;
|
||
}
|
||
|
||
export function AddonList({ addons, devices, selected, onToggle }: AddonListProps) {
|
||
if (addons.length === 0) return null;
|
||
return (
|
||
<div className="plan-addons">
|
||
<div className="addons-head">
|
||
<h3 className="addons-title">Дополнения</h3>
|
||
<span className="addons-cap">Опционально</span>
|
||
</div>
|
||
<div className="addon-list">
|
||
{addons.map((a) => {
|
||
const on = selected.includes(a.id);
|
||
const enabled = a.is_enabled;
|
||
const price = addonPriceForDevices(a, devices);
|
||
return (
|
||
<button
|
||
key={a.id}
|
||
type="button"
|
||
className={`addon-row ${on ? 'is-selected' : ''} ${enabled ? '' : 'is-disabled'}`.trim()}
|
||
aria-pressed={on}
|
||
disabled={!enabled}
|
||
onClick={() => onToggle(a.id)}
|
||
>
|
||
<span className="addon-toggle" aria-hidden="true" />
|
||
<span className="addon-info">
|
||
<span className="addon-name">{a.name}</span>
|
||
{!enabled && <span className="addon-status">Недоступно</span>}
|
||
</span>
|
||
<span className="addon-price">
|
||
{price === 0 ? 'Бесплатно' : <><span className="plus">+</span>{formatMoney(price)}</>}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|