Dateien nach "competitor-analysis/components" hochladen

competitor-analysis/components/Step2_Keywords.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Keyword } from '../types';
+import { EditableCard } from './EditableCard';
+
+interface Step2KeywordsProps {
+    keywords: Keyword[];
+    onKeywordsChange: (keywords: Keyword[]) => void;
+    t: any;
+}
+
+const Step2Keywords: React.FC<Step2KeywordsProps> = ({ keywords, onKeywordsChange, t }) => {
+    return (
+        <div>
+            <h2 className="text-2xl font-bold mb-4">{t.title}</h2>
+            <p className="text-light-subtle dark:text-brand-light mb-6">{t.subtitle}</p>
+            
+            <EditableCard<Keyword>
+                title={t.cardTitle}
+                items={keywords}
+                onItemsChange={onKeywordsChange}
+                fieldConfigs={[
+                    { key: 'term', label: t.termLabel, type: 'text' },
+                    { key: 'rationale', label: t.rationaleLabel, type: 'textarea' },
+                ]}
+                newItemTemplate={{ term: '', rationale: '' }}
+                renderDisplay={(item) => (
+                    <div>
+                        <strong className="text-light-text dark:text-white">{item.term}</strong>
+                        <p className="text-light-subtle dark:text-brand-light text-sm mt-1">{item.rationale}</p>
+                    </div>
+                )}
+                t={t.editableCard}
+            />
+        </div>
+    );
+};
+
+export default Step2Keywords;