v0.0.01b

src/components/AddonList.tsx

@@ -0,0 +1,43 @@
+import type { AddonData } from '../types';
+import { formatMoney } from '../lib/format';
+
+interface AddonListProps {
+  addons: AddonData[];
+  selected: string[];
+  onToggle: (id: string) => void;
+}
+
+export function AddonList({ addons, 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);
+          return (
+            <button
+              key={a.id}
+              type="button"
+              className={`addon-row ${on ? 'is-selected' : ''}`.trim()}
+              aria-pressed={on}
+              onClick={() => onToggle(a.id)}
+            >
+              <span className="addon-toggle" aria-hidden="true" />
+              <span className="addon-info">
+                <span className="addon-name">{a.name}</span>
+              </span>
+              <span className="addon-price">
+                <span className="plus">+</span>
+                {formatMoney(a.price)}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}