38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
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; |