Remove unused components and models for improved maintainability
- 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.
This commit is contained in:
natreex
@@ -1,16 +1,15 @@
|
||||
'use client';
|
||||
import React, {useCallback, useContext, useMemo, useState} from 'react';
|
||||
import {useLocations, UseLocationsConfig, LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faSpinner, faPlus, faToggleOn} from '@fortawesome/free-solid-svg-icons';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {SeriesLocationItem} from '@/lib/models/Series';
|
||||
import {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {Plus} from 'lucide-react';
|
||||
import PulseLoader from '@/components/ui/PulseLoader';
|
||||
import {BookContext, BookContextProps} from '@/context/BookContext';
|
||||
import {SeriesLocationItem} from '@/lib/types/series';
|
||||
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
|
||||
import AlertBox from '@/components/AlertBox';
|
||||
import AlertBox from '@/components/ui/AlertBox';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import ToggleSwitch from '@/components/form/ToggleSwitch';
|
||||
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
|
||||
|
||||
import LocationEditorList from './LocationEditorList';
|
||||
@@ -24,17 +23,17 @@ import LocationEditorEdit from './LocationEditorEdit';
|
||||
*/
|
||||
export default function LocationEditor(): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const {book} = useContext(BookContext);
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
const [showAddForm, setShowAddForm] = useState<boolean>(false);
|
||||
|
||||
|
||||
const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
|
||||
return {
|
||||
entityType: 'book',
|
||||
entityId: book?.bookId || '',
|
||||
};
|
||||
}, [book?.bookId]);
|
||||
|
||||
|
||||
const {
|
||||
sections,
|
||||
seriesLocations,
|
||||
@@ -66,7 +65,7 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
exitEditMode,
|
||||
backToList,
|
||||
} = useLocations(config);
|
||||
|
||||
|
||||
const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
|
||||
return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
|
||||
return !sections.some(function (s: LocationProps): boolean {
|
||||
@@ -74,12 +73,12 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
});
|
||||
});
|
||||
}, [seriesLocations, sections]);
|
||||
|
||||
|
||||
// Wrapper pour convertir LocationProps en index
|
||||
const handleSectionClick = useCallback(function (section: LocationProps, index: number): void {
|
||||
enterDetailMode(index);
|
||||
}, [enterDetailMode]);
|
||||
|
||||
|
||||
// Gestion de l'ajout
|
||||
async function handleAddSection(): Promise<void> {
|
||||
if (newSectionName.trim()) {
|
||||
@@ -89,15 +88,15 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
setShowAddForm(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
await exitEditMode(true);
|
||||
}
|
||||
|
||||
|
||||
function handleCancel(): void {
|
||||
exitEditMode(false);
|
||||
}
|
||||
|
||||
|
||||
async function handleDelete(): Promise<void> {
|
||||
if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
|
||||
await removeSection(sections[selectedSectionIndex].id);
|
||||
@@ -105,18 +104,14 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
backToList();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
|
||||
</div>
|
||||
);
|
||||
return <PulseLoader size="sm"/>;
|
||||
}
|
||||
|
||||
|
||||
const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
|
||||
const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ToolDetailHeader
|
||||
@@ -128,81 +123,67 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
onEdit={enterEditMode}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
onDelete={function (): void { setShowDeleteConfirm(true); }}
|
||||
onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
|
||||
onDelete={function (): void {
|
||||
setShowDeleteConfirm(true);
|
||||
}}
|
||||
onExport={canExport ? function (): Promise<void> {
|
||||
return exportToSeries(selectedSection!);
|
||||
} : undefined}
|
||||
showExport={canExport}
|
||||
showDelete={Boolean(selectedSection)}
|
||||
/>
|
||||
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{viewMode === 'list' && (
|
||||
<div className="space-y-3 p-2">
|
||||
{/* Toggle tool */}
|
||||
<div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
|
||||
<InputField
|
||||
icon={faToggleOn}
|
||||
fieldName={t('locationComponent.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={toggleTool}
|
||||
/>
|
||||
}
|
||||
{/* Import from series */}
|
||||
{bookSeriesId && availableSeriesLocations.length > 0 && (
|
||||
<SeriesImportSelector
|
||||
availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
|
||||
return {id: sl.id, name: sl.name};
|
||||
})}
|
||||
onImport={importFromSeries}
|
||||
placeholder={t('seriesImport.selectElement')}
|
||||
label={t('seriesImport.importFromSeries')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{toolEnabled && (
|
||||
<>
|
||||
{/* Import from series */}
|
||||
{bookSeriesId && availableSeriesLocations.length > 0 && (
|
||||
<SeriesImportSelector
|
||||
availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
|
||||
return {id: sl.id, name: sl.name};
|
||||
})}
|
||||
onImport={importFromSeries}
|
||||
placeholder={t('seriesImport.selectElement')}
|
||||
label={t('seriesImport.importFromSeries')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showAddForm && (
|
||||
<div className="px-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newSectionName}
|
||||
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setNewSectionName(e.target.value);
|
||||
}}
|
||||
placeholder={t('locationComponent.newSectionPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t('locationComponent.addSectionLabel')}
|
||||
addButtonCallBack={async function (): Promise<void> {
|
||||
await addSection();
|
||||
setShowAddForm(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LocationEditorList
|
||||
sections={sections}
|
||||
onSectionClick={handleSectionClick}
|
||||
onAddSection={handleAddSection}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{showAddForm && (
|
||||
<div className="px-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newSectionName}
|
||||
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setNewSectionName(e.target.value);
|
||||
}}
|
||||
placeholder={t('locationComponent.newSectionPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={Plus}
|
||||
actionLabel={t('locationComponent.addSectionLabel')}
|
||||
addButtonCallBack={async function (): Promise<void> {
|
||||
await addSection();
|
||||
setShowAddForm(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LocationEditorList
|
||||
sections={sections}
|
||||
onSectionClick={handleSectionClick}
|
||||
onAddSection={handleAddSection}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{viewMode === 'detail' && selectedSection && (
|
||||
<div className="p-4">
|
||||
<LocationEditorDetail section={selectedSection}/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{viewMode === 'edit' && selectedSection && (
|
||||
<div className="p-4">
|
||||
<LocationEditorEdit
|
||||
@@ -225,7 +206,7 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{showDeleteConfirm && selectedSection && (
|
||||
<AlertBox
|
||||
title={t('locationComponent.deleteTitle')}
|
||||
@@ -234,7 +215,9 @@ export default function LocationEditor(): React.JSX.Element {
|
||||
confirmText={t('common.delete')}
|
||||
cancelText={t('common.cancel')}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={function (): void { setShowDeleteConfirm(false); }}
|
||||
onCancel={function (): void {
|
||||
setShowDeleteConfirm(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faLocationDot, faMapPin} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
|
||||
import {MapPin, Navigation} from 'lucide-react';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface LocationEditorDetailProps {
|
||||
section: LocationProps;
|
||||
@@ -15,37 +14,39 @@ interface LocationEditorDetailProps {
|
||||
* PAS de CollapsableArea, PAS de grids
|
||||
*/
|
||||
export default function LocationEditorDetail({
|
||||
section,
|
||||
}: LocationEditorDetailProps): React.JSX.Element {
|
||||
section,
|
||||
}: LocationEditorDetailProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-text-primary font-semibold text-base mb-4">{section.name}</h3>
|
||||
|
||||
|
||||
{section.elements.length === 0 ? (
|
||||
<p className="text-muted text-sm">{t('locationComponent.noElementAvailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{section.elements.map(function (element: Element): React.JSX.Element {
|
||||
return (
|
||||
<div key={element.id} className="border-b border-secondary/30 pb-3 last:border-b-0">
|
||||
<div key={element.id} className="border-b border-secondary pb-3 last:border-b-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
|
||||
<MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
|
||||
<span className="text-text-primary font-medium text-sm">{element.name}</span>
|
||||
</div>
|
||||
{element.description && (
|
||||
<p className="text-text-secondary text-xs ml-5 mb-2">{element.description}</p>
|
||||
)}
|
||||
|
||||
|
||||
{element.subElements.length > 0 && (
|
||||
<div className="ml-5 mt-2 space-y-1">
|
||||
{element.subElements.map(function (subElement: SubElement): React.JSX.Element {
|
||||
return (
|
||||
<div key={subElement.id} className="flex items-start gap-2">
|
||||
<FontAwesomeIcon icon={faLocationDot} className="text-muted w-2 h-2 mt-1.5"/>
|
||||
<Navigation className="text-muted w-2 h-2 mt-1.5"
|
||||
strokeWidth={1.75}/>
|
||||
<div>
|
||||
<span className="text-text-primary text-xs">{subElement.name}</span>
|
||||
<span
|
||||
className="text-text-primary text-xs">{subElement.name}</span>
|
||||
{subElement.description && (
|
||||
<p className="text-muted text-xs">{subElement.description}</p>
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
'use client';
|
||||
import React, {ChangeEvent} from 'react';
|
||||
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
|
||||
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faMapPin, faPlus} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import TextAreaInput from '@/components/form/TextAreaInput';
|
||||
import {MapPin, Plus} from 'lucide-react';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface LocationEditorEditProps {
|
||||
section: LocationProps;
|
||||
@@ -28,33 +27,33 @@ interface LocationEditorEditProps {
|
||||
* PAS de CollapsableArea, PAS de grids
|
||||
*/
|
||||
export default function LocationEditorEdit({
|
||||
section,
|
||||
newElementNames,
|
||||
newSubElementNames,
|
||||
onAddElement,
|
||||
onAddSubElement,
|
||||
onRemoveElement,
|
||||
onRemoveSubElement,
|
||||
onUpdateElement,
|
||||
onUpdateSubElement,
|
||||
onNewElementNameChange,
|
||||
onNewSubElementNameChange,
|
||||
}: LocationEditorEditProps): React.JSX.Element {
|
||||
section,
|
||||
newElementNames,
|
||||
newSubElementNames,
|
||||
onAddElement,
|
||||
onAddSubElement,
|
||||
onRemoveElement,
|
||||
onRemoveSubElement,
|
||||
onUpdateElement,
|
||||
onUpdateSubElement,
|
||||
onNewElementNameChange,
|
||||
onNewSubElementNameChange,
|
||||
}: LocationEditorEditProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-text-primary font-semibold text-base">{section.name}</h3>
|
||||
|
||||
|
||||
{/* Éléments existants */}
|
||||
{section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
|
||||
return (
|
||||
<div key={element.id} className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
|
||||
<div key={element.id} className="bg-tertiary rounded-lg p-3 border border-secondary">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
|
||||
<MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
|
||||
<span className="text-text-secondary text-xs">{t('locationComponent.element')}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
@@ -69,9 +68,9 @@ export default function LocationEditorEdit({
|
||||
return onRemoveElement(section.id, elementIndex);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
<div className="mt-2">
|
||||
<TexteAreaInput
|
||||
<TextAreaInput
|
||||
value={element.description}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onUpdateElement(section.id, elementIndex, 'description', e.target.value);
|
||||
@@ -79,13 +78,13 @@ export default function LocationEditorEdit({
|
||||
placeholder={t('locationComponent.elementDescriptionPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Sous-éléments */}
|
||||
{element.subElements.length > 0 && (
|
||||
<div className="mt-3 pt-3 border-t border-secondary/30 space-y-2">
|
||||
<div className="mt-3 pt-3 border-t border-secondary space-y-2">
|
||||
{element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
|
||||
return (
|
||||
<div key={subElement.id} className="bg-dark-background/50 rounded p-2">
|
||||
<div key={subElement.id} className="bg-secondary rounded p-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
@@ -105,7 +104,7 @@ export default function LocationEditorEdit({
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Ajouter sous-élément */}
|
||||
<div className="mt-2">
|
||||
<InputField
|
||||
@@ -118,7 +117,7 @@ export default function LocationEditorEdit({
|
||||
placeholder={t('locationComponent.newSubElementPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionIcon={Plus}
|
||||
actionLabel={t('locationComponent.addSubElement')}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onAddSubElement(section.id, elementIndex);
|
||||
@@ -128,7 +127,7 @@ export default function LocationEditorEdit({
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
{/* Ajouter élément */}
|
||||
<InputField
|
||||
fieldName={t('locationComponent.addElement')}
|
||||
@@ -141,7 +140,7 @@ export default function LocationEditorEdit({
|
||||
placeholder={t('locationComponent.newElementPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionIcon={Plus}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onAddElement(section.id);
|
||||
}}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
'use client';
|
||||
import React, {useState} from 'react';
|
||||
import {LocationProps, Element} from '@/hooks/settings/useLocations';
|
||||
import {Element, LocationProps} from '@/hooks/settings/useLocations';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronRight, faMapMarkerAlt, faPlus} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {MapPin, Plus} from 'lucide-react';
|
||||
import EmptyState from '@/components/ui/EmptyState';
|
||||
import EntityListItem from '@/components/ui/EntityListItem';
|
||||
import AvatarIcon from '@/components/ui/AvatarIcon';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface LocationEditorListProps {
|
||||
sections: LocationProps[];
|
||||
@@ -19,19 +21,19 @@ interface LocationEditorListProps {
|
||||
* PAS de scroll interne (géré par parent ComposerRightBar)
|
||||
*/
|
||||
export default function LocationEditorList({
|
||||
sections,
|
||||
onSectionClick,
|
||||
onAddSection,
|
||||
}: LocationEditorListProps): React.JSX.Element {
|
||||
sections,
|
||||
onSectionClick,
|
||||
onAddSection,
|
||||
}: LocationEditorListProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
|
||||
|
||||
function getFilteredSections(): LocationProps[] {
|
||||
return sections.filter(function (section: LocationProps): boolean {
|
||||
return section.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function countTotalElements(section: LocationProps): number {
|
||||
let count: number = section.elements.length;
|
||||
section.elements.forEach(function (element: Element): void {
|
||||
@@ -39,9 +41,9 @@ export default function LocationEditorList({
|
||||
});
|
||||
return count;
|
||||
}
|
||||
|
||||
|
||||
const filteredSections: LocationProps[] = getFilteredSections();
|
||||
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="px-2">
|
||||
@@ -55,55 +57,31 @@ export default function LocationEditorList({
|
||||
placeholder={t('locationComponent.search')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionIcon={Plus}
|
||||
actionLabel={t('locationComponent.addSectionLabel')}
|
||||
addButtonCallBack={async function (): Promise<void> {
|
||||
onAddSection();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="px-2 space-y-2">
|
||||
{filteredSections.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
|
||||
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-8 h-8"/>
|
||||
</div>
|
||||
<h3 className="text-text-primary font-semibold text-base mb-1">
|
||||
{t('locationComponent.noSectionAvailable')}
|
||||
</h3>
|
||||
<p className="text-muted text-sm max-w-xs">
|
||||
{t('locationComponent.noSectionDescription')}
|
||||
</p>
|
||||
</div>
|
||||
<EmptyState icon={MapPin} title={t('locationComponent.noSectionAvailable')}
|
||||
description={t('locationComponent.noSectionDescription')}/>
|
||||
) : (
|
||||
filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
|
||||
return (
|
||||
<div
|
||||
<EntityListItem
|
||||
key={section.id}
|
||||
onClick={function (): void { onSectionClick(section, index); }}
|
||||
className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
|
||||
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-5 h-5"/>
|
||||
</div>
|
||||
|
||||
<div className="ml-3 flex-1 min-w-0">
|
||||
<div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
|
||||
{section.name}
|
||||
</div>
|
||||
<div className="text-muted text-xs truncate">
|
||||
{t('locationComponent.elementsCount', {count: countTotalElements(section)})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-6 flex justify-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
size="sm"
|
||||
onClick={function (): void {
|
||||
onSectionClick(section, index);
|
||||
}}
|
||||
avatar={<AvatarIcon size="sm" icon={MapPin}/>}
|
||||
title={section.name}
|
||||
subtitle={t('locationComponent.elementsCount', {count: countTotalElements(section)})}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user