ttrpg-tools/src/components/md-deck/editor-panel/DataEditorPanel.tsx

import { For } from "solid-js";
import type { DeckStore } from "../hooks/deckStore";

export interface DataEditorPanelProps {
  activeTab: number;
  cards: DeckStore["state"]["cards"];
  updateCardData: DeckStore["actions"]["updateCardData"];
}

/**
 * 左侧：CSV 数据编辑面板
 */
export function DataEditorPanel(props: DataEditorPanelProps) {
  return (
    <div class="w-64 shrink-0">
      <h3 class="font-bold mb-2">卡牌数据</h3>
      <div class="space-y-2 max-h-96 overflow-y-auto">
        <For each={Object.keys(props.cards[props.activeTab] || {})}>
          {(key) => (
            <div>
              <label class="block text-sm font-medium text-gray-700">
                {key}
              </label>
              <textarea
                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                rows={3}
                value={props.cards[props.activeTab]?.[key] || ""}
                onInput={(e) =>
                  props.updateCardData(props.activeTab, key, e.target.value)
                }
              />
            </div>
          )}
        </For>
      </div>
    </div>
  );
}