113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
/**
|
|
* GallerySettingsSection
|
|
*
|
|
* Settings for gallery element type.
|
|
* Manages gallery cards with images, titles, and descriptions.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { mdiPlus, mdiTrashCan } from '@mdi/js';
|
|
import BaseButton from '../BaseButton';
|
|
import CardBox from '../CardBox';
|
|
import FormField from '../FormField';
|
|
import type { GallerySettingsSectionProps } from './types';
|
|
|
|
const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
|
|
galleryCards,
|
|
onAddCard,
|
|
onRemoveCard,
|
|
onUpdateCard,
|
|
context,
|
|
imageAssetOptions = [],
|
|
}) => {
|
|
const isConstructor = context === 'constructor';
|
|
|
|
return (
|
|
<CardBox className='border border-gray-200 dark:border-dark-700'>
|
|
<div className='mb-3 flex items-center justify-between'>
|
|
<h3 className='text-sm font-semibold'>Gallery cards</h3>
|
|
<BaseButton
|
|
color='info'
|
|
icon={mdiPlus}
|
|
small
|
|
label='Add card'
|
|
onClick={onAddCard}
|
|
/>
|
|
</div>
|
|
|
|
<div className='space-y-4'>
|
|
{galleryCards.length === 0 ? (
|
|
<p className='text-sm text-gray-500'>No cards yet.</p>
|
|
) : (
|
|
galleryCards.map((card, index) => (
|
|
<CardBox
|
|
key={card.id}
|
|
className='border border-gray-200 dark:border-dark-700'
|
|
>
|
|
<div className='mb-3 flex items-center justify-between'>
|
|
<h4 className='text-sm font-semibold'>Card {index + 1}</h4>
|
|
<BaseButton
|
|
color='danger'
|
|
icon={mdiTrashCan}
|
|
small
|
|
outline
|
|
onClick={() => onRemoveCard(card.id)}
|
|
/>
|
|
</div>
|
|
<div className='grid gap-3 md:grid-cols-2'>
|
|
{isConstructor ? (
|
|
<FormField label='Image'>
|
|
<select
|
|
value={card.imageUrl}
|
|
onChange={(event) =>
|
|
onUpdateCard(card.id, 'imageUrl', event.target.value)
|
|
}
|
|
>
|
|
<option value=''>Not selected</option>
|
|
{imageAssetOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
) : (
|
|
<FormField label='Image URL'>
|
|
<input
|
|
value={card.imageUrl}
|
|
onChange={(event) =>
|
|
onUpdateCard(card.id, 'imageUrl', event.target.value)
|
|
}
|
|
/>
|
|
</FormField>
|
|
)}
|
|
<FormField label='Title'>
|
|
<input
|
|
value={card.title}
|
|
onChange={(event) =>
|
|
onUpdateCard(card.id, 'title', event.target.value)
|
|
}
|
|
/>
|
|
</FormField>
|
|
<div className='md:col-span-2'>
|
|
<FormField label='Description' hasTextareaHeight>
|
|
<textarea
|
|
value={card.description}
|
|
onChange={(event) =>
|
|
onUpdateCard(card.id, 'description', event.target.value)
|
|
}
|
|
className='h-24 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardBox>
|
|
);
|
|
};
|
|
|
|
export default GallerySettingsSection;
|