Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | 7x 7x 7x 12x 7x 1x 6x 1x 9x 9x 9x 9x | import { Search, Plus, Settings, ChevronLeft, ChevronRight } from 'lucide-react'
import { useState } from 'react'
import { Link } from 'react-router-dom'
export default function EntitySidebar({
items = [],
selectedId,
getItemHref,
searchPlaceholder = 'Rechercher...',
emptyMessage = 'Aucun élément',
filterFn,
renderItem,
title = null,
icon: Icon = null,
iconClass = '',
backofficeTo = null,
backofficeManageLabel = 'Gérer',
backofficeCreateLabel = 'Créer',
createOnly = false,
loading = false,
collapsed = false,
onCollapsedChange = null,
titleActions = null,
header = null,
filter = null,
showList = true,
className = '',
}) {
const [search, setSearch] = useState('')
const hasItems = items.length > 0
const filtered = filterFn
? items.filter((item) => filterFn(item).toLowerCase().includes(search.toLowerCase()))
: items
if (collapsed) {
return (
<aside className={`w-full h-full flex flex-col items-center py-3 gap-3 bg-gray-50 border-r border-gray-200 ${className}`}>
{Icon && <Icon className={`w-5 h-5 flex-shrink-0 ${iconClass}`} />}
{onCollapsedChange && (
<button
onClick={onCollapsedChange}
title="Ouvrir la sélection"
className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
<ChevronRight className="w-5 h-5" />
</button>
)}
</aside>
)
}
return (
<aside className={`w-full h-full border-r border-gray-200 flex flex-col flex-shrink-0 bg-gray-50 ${className}`}>
{title && (
<div className="px-3 pt-3 pb-2 flex-shrink-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center min-w-0 flex-1">
{Icon && <Icon className={`w-4 h-4 mr-2 flex-shrink-0 ${iconClass}`} />}
<h2 className="text-sm font-semibold text-gray-900 truncate">{title}</h2>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
{titleActions}
{onCollapsedChange && (
<button
onClick={onCollapsedChange}
title="Réduire la sélection"
className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 flex-shrink-0"
>
<ChevronLeft className="w-5 h-5" />
</button>
)}
</div>
</div>
</div>
)}
{header && <div className="px-3 pb-2 flex-shrink-0">{header}</div>}
{backofficeTo && (
<div className="px-3 pb-2 flex-shrink-0">
{loading ? (
<div className="w-full h-[34px]" />
) : (
<Link
to={backofficeTo}
className="w-full flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
{createOnly || !hasItems ? <Plus className="w-4 h-4 mr-1.5" /> : <Settings className="w-4 h-4 mr-1.5" />}
{createOnly || !hasItems ? backofficeCreateLabel : backofficeManageLabel}
</Link>
)}
</div>
)}
{showList && (
<div className="p-3 border-b border-gray-200 bg-white flex-shrink-0">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={searchPlaceholder}
className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none"
/>
</div>
</div>
)}
{showList && filter && (
<div className="px-3 py-2 border-b border-gray-200 flex-shrink-0">{filter}</div>
)}
<div className="flex-1 overflow-y-auto p-2 space-y-1">
{!showList ? (
<div className="text-sm text-gray-400 text-center py-8 px-2">{emptyMessage}</div>
) : filtered.length === 0 ? (
<div className="text-sm text-gray-500 text-center py-8 px-2">{emptyMessage}</div>
) : (
filtered.map((item) => {
const id = item.id || item._id
const isSelected = selectedId === id
const itemHref = getItemHref ? getItemHref(item) : null
return (
<div
key={id}
className={`w-full flex items-center rounded-lg border transition-all ${
isSelected
? 'bg-white border-gray-400 shadow-sm'
: 'border-transparent hover:bg-white hover:border-gray-200'
}`}
>
{itemHref && (
<Link
to={itemHref}
title={item.name}
className="flex-1 min-w-0 p-2.5 text-left rounded-lg"
>
{renderItem(item, isSelected)}
</Link>
)}
</div>
)
})
)}
</div>
</aside>
)
} |