64ed90d993
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
|
|
import {spellPowerLevels} from '@/lib/constants/spell';
|
|
import {SeriesSpellDetailResponse} from '@/lib/types/series';
|
|
import {SelectBoxProps} from '@/components/form/SelectBox';
|
|
import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
|
|
import DetailField from '@/components/ui/DetailField';
|
|
import {useTranslations} from '@/lib/i18n';
|
|
|
|
interface SpellEditorDetailProps {
|
|
spell: SpellEditState;
|
|
availableTags: SpellTagProps[];
|
|
seriesSpell?: SeriesSpellDetailResponse | null;
|
|
}
|
|
|
|
/**
|
|
* SpellEditorDetail - Version sidebar lecture seule
|
|
* Layout linéaire simple, juste les infos essentielles empilées
|
|
* PAS de CollapsableArea, PAS de grids
|
|
*/
|
|
export default function SpellEditorDetail({
|
|
spell,
|
|
availableTags,
|
|
seriesSpell,
|
|
}: SpellEditorDetailProps): React.JSX.Element {
|
|
const t = useTranslations();
|
|
|
|
function getSelectedTags(): SpellTagProps[] {
|
|
return availableTags.filter(function (tag: SpellTagProps): boolean {
|
|
return spell.tags.includes(tag.id);
|
|
});
|
|
}
|
|
|
|
function getLocalizedPowerLevel(): string {
|
|
if (!spell.powerLevel || spell.powerLevel === 'none') {
|
|
return '';
|
|
}
|
|
const level: SelectBoxProps | undefined = spellPowerLevels.find(function (l: SelectBoxProps): boolean {
|
|
return l.value === spell.powerLevel;
|
|
});
|
|
return level ? t(level.label) : spell.powerLevel;
|
|
}
|
|
|
|
const selectedTags: SpellTagProps[] = getSelectedTags();
|
|
const powerLevelText: string = getLocalizedPowerLevel();
|
|
|
|
return (
|
|
<div>
|
|
<h3 className="text-text-primary font-semibold text-base mb-4">{spell.name}</h3>
|
|
|
|
<DetailField variant="compact" label={t('spellDetail.description')} value={spell.description}/>
|
|
<DetailField variant="compact" label={t('spellDetail.appearance')} value={spell.appearance}/>
|
|
{powerLevelText &&
|
|
<DetailField variant="compact" label={t('spellDetail.powerLevel')} value={powerLevelText}/>}
|
|
<DetailField variant="compact" label={t('spellDetail.components')} value={spell.components}/>
|
|
<DetailField variant="compact" label={t('spellDetail.limitations')} value={spell.limitations}/>
|
|
<DetailField variant="compact" label={t('spellDetail.notes')} value={spell.notes}/>
|
|
|
|
{selectedTags.length > 0 && (
|
|
<div className="mb-3">
|
|
<span className="text-text-secondary text-xs block mb-1">{t('spellDetail.tags')}</span>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
|
|
return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|