const FilterRail = ({ filters, setFilters, counts }) => {
const Section = ({ title, jp, children, extra }) => (
{title}
{jp}
{extra}
{children}
);
const channelOpts = [
{ key: "pokemon_center", zh: "寶可夢中心", jp: "ポケモンセンター", color: "#EF4444" },
{ key: "yodobashi", zh: "Yodobashi", jp: "ヨドバシ", color: "#F59E0B" },
{ key: "bic_camera", zh: "BIC Camera", jp: "ビックカメラ", color: "#F59E0B" },
{ key: "aeon", zh: "AEON", jp: "イオン", color: "#10B981" },
{ key: "yamada", zh: "Yamada", jp: "ヤマダ電機", color: "#3B82F6" },
{ key: "toys_r_us", zh: "Toys\"R\"Us", jp: "トイザらス", color: "#EC4899" },
{ key: "amazon", zh: "Amazon", jp: "アマゾン", color: "#6B7280" },
{ key: "other", zh: "其他", jp: "その他", color: "#6B7280" },
];
const typeOpts = [
{ key: "lottery", zh: "抽選", jp: "lottery", color: "#3B82F6" },
{ key: "preorder", zh: "予約", jp: "preorder", color: "#10B981" },
{ key: "walk_in", zh: "店頭販售", jp: "walk-in", color: "#F59E0B" },
];
const toggle = (group, key) => {
setFilters(f => {
const has = f[group].includes(key);
// Don't let user re-check a zero-count option
if (!has && counts?.[group]?.[key] === 0) return f;
return { ...f, [group]: has ? f[group].filter(k => k !== key) : [...f[group], key] };
});
};
const ColorDot = ({ c, dim }) => (
);
// A single filter row. Disables visually when count === 0.
const FilterRow = ({ opt, group, checked, count }) => {
const disabled = count === 0;
return (
);
};
// Channel legend block — moved OFF the map, into filter rail above the toggles.
const ChannelLegend = () => (
Pin 顏色對照 · Pin legend
{[
["#EF4444","Pokémon"],["#F59E0B","Yodo / BIC"],
["#10B981","AEON"],["#3B82F6","Yamada"],
["#EC4899","Toys\"R\"Us"],["#6B7280","其他"]
].map(([c,l]) => (
{l}
))}
);
return (
);
};
window.FilterRail = FilterRail;