38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import React, {ChangeEvent} from 'react';
|
|
import {faTrash} from '@fortawesome/free-solid-svg-icons';
|
|
import {ActChapter} from '@/lib/models/Chapter';
|
|
import InputField from '@/components/form/InputField';
|
|
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
|
import {useTranslations} from 'next-intl';
|
|
|
|
interface ActChapterItemProps {
|
|
chapter: ActChapter;
|
|
onUpdateSummary: (chapterId: string, summary: string) => void;
|
|
onUnlink: (chapterInfoId: string, chapterId: string) => Promise<void>;
|
|
}
|
|
|
|
export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: ActChapterItemProps) {
|
|
const t = useTranslations('actComponent');
|
|
|
|
return (
|
|
<div
|
|
className="bg-secondary/20 p-4 rounded-xl mb-3 border border-secondary/30 shadow-sm hover:shadow-md transition-all duration-200">
|
|
<InputField
|
|
input={
|
|
<TexteAreaInput
|
|
value={chapter.summary || ''}
|
|
setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
|
|
onUpdateSummary(chapter.chapterId, e.target.value)
|
|
}
|
|
placeholder={t('chapterSummaryPlaceholder')}
|
|
/>
|
|
}
|
|
actionIcon={faTrash}
|
|
fieldName={chapter.title}
|
|
action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
|
|
actionLabel={t('remove')}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|