function PackFilter({ onSubmit, initialValues = {} }) { const [packName, setPackName] = useState(initialValues.packName || ""); const [series, setSeries] = useState(initialValues.series || ""); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit?.({ packName, series }); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "パック名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "packName", value: packName, onChange: (e)=>setPackName(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "パック名を入力", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "シリーズ"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "series", value: series, onChange: (e)=>setSeries(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "シリーズ名を入力", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto py-2 px-4 rounded-md hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "フィルター適用"))); } function PackFilterStory() { const handleSubmit = (values)=>{ console.log("Filter values:", values); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PackFilter, { onSubmit: handleSubmit, initialValues: { packName: "", series: "" }, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function CardFilter({ onFilterChange, filters }) { const handleInputChange = (e)=>{ const { name, value } = e.target; onFilterChange?.({ ...filters, [name]: value }); }; return /*#__PURE__*/ React.createElement("form", { className: "p-4 bg-white rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: filters?.name || "", onChange: handleInputChange, placeholder: "名前で検索", className: "px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "color", value: filters?.color || "", onChange: handleInputChange, placeholder: "カラーで検索", className: "px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "type", value: filters?.type || "", onChange: handleInputChange, placeholder: "タイプで検索", className: "px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "text", value: filters?.text || "", onChange: handleInputChange, placeholder: "テキストで検索", className: "px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "packName", value: filters?.packName || "", onChange: handleInputChange, placeholder: "パック名で検索", className: "px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }))); } function CardFilterStory() { const [filters, setFilters] = useState({}); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CardFilter, { filters: filters, onFilterChange: setFilters, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, JSON.stringify(filters, null, 2)))); } function PackDisplay({ packName, series }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center p-4 rounded-lg bg-[#f8f9fa] border border-[#e9ecef]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg font-semibold text-[#212529]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, packName), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#6c757d]", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, series))); } function PackDisplayStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PackDisplay, { packName: "ベーシックパック", series: "ソード＆シールド", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PackDisplay, { packName: "拡張パック", series: "スカーレット＆バイオレット", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function CardDisplay({ card }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg overflow-hidden shadow-lg bg-white p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, card?.name), /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 rounded-full text-sm font-semibold", style: { backgroundColor: card?.color || "#e2e2e2" }, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, card?.color)), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, card?.type)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, card?.text)), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "パック: ", card?.packName)); } function CardDisplayStory() { const sampleCard = { name: "ドラゴンの咆哮", color: "#ff4444", type: "呪文", text: "対戦相手のクリーチャー1体に5ダメージを与える。", packName: "ドラゴンの覚醒" }; const sampleCard2 = { name: "癒しの天使", color: "#44ff44", type: "クリーチャー", text: "あなたのライフを3回復する。", packName: "天使の祝福" }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CardDisplay, { card: sampleCard, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CardDisplay, { card: sampleCard2, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = useState("cards"); const [cardFilters, setCardFilters] = useState({}); const [packFilters, setPackFilters] = useState({}); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex rounded-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("cards"), className: `px-6 py-3 rounded-l-lg font-roboto ${activeTab === "cards" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"}`, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "カード検索"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("packs"), className: `px-6 py-3 rounded-r-lg font-roboto ${activeTab === "packs" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "パック検索"))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, activeTab === "cards" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(CardFilter, { filters: cardFilters, onFilterChange: setCardFilters, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(React.Fragment, null)) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(PackFilter, { onSubmit: setPackFilters, initialValues: packFilters, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(PackDisplay, { ...packFilters, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })))); }