mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
8d4c00d176
- Introduced SettingsSidebar for improved navigation and organization. - Added SettingsSearch and its mobile variant for enhanced search functionality. - Updated AdminSettings to utilize new components, streamlining the layout and improving user experience.
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
||
import { SearchIcon, CloseIcon } from './icons'
|
||
|
||
interface SettingsSearchProps {
|
||
searchQuery: string
|
||
setSearchQuery: (query: string) => void
|
||
resultsCount?: number
|
||
}
|
||
|
||
export function SettingsSearch({ searchQuery, setSearchQuery }: SettingsSearchProps) {
|
||
const { t } = useTranslation()
|
||
|
||
return (
|
||
<>
|
||
{/* Search - desktop */}
|
||
<div className="relative hidden sm:block">
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder={t('admin.settings.searchPlaceholder')}
|
||
className="w-48 lg:w-64 pl-10 pr-10 py-2 rounded-xl bg-dark-800 border border-dark-700 text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-500 text-sm"
|
||
/>
|
||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500">
|
||
<SearchIcon />
|
||
</div>
|
||
{searchQuery && (
|
||
<button
|
||
onClick={() => setSearchQuery('')}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-dark-500 hover:text-dark-300 transition-colors"
|
||
>
|
||
<CloseIcon />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export function SettingsSearchMobile({ searchQuery, setSearchQuery }: Omit<SettingsSearchProps, 'resultsCount'>) {
|
||
const { t } = useTranslation()
|
||
|
||
return (
|
||
<div className="relative mt-3 sm:hidden">
|
||
<input
|
||
type="text"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
placeholder={t('admin.settings.searchPlaceholder')}
|
||
className="w-full pl-10 pr-10 py-2 rounded-xl bg-dark-800 border border-dark-700 text-dark-100 placeholder-dark-500 focus:outline-none focus:border-accent-500 text-sm"
|
||
/>
|
||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500">
|
||
<SearchIcon />
|
||
</div>
|
||
{searchQuery && (
|
||
<button
|
||
onClick={() => setSearchQuery('')}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-dark-500 hover:text-dark-300 transition-colors"
|
||
>
|
||
<CloseIcon />
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function SettingsSearchResults({ searchQuery, resultsCount }: { searchQuery: string; resultsCount: number }) {
|
||
if (!searchQuery.trim()) return null
|
||
|
||
return (
|
||
<div className="mt-3 flex items-center gap-2 text-sm">
|
||
<span className="text-dark-400">
|
||
{resultsCount > 0 ? `Найдено: ${resultsCount}` : 'Ничего не найдено'}
|
||
</span>
|
||
{resultsCount > 0 && (
|
||
<span className="text-dark-500">по запросу «{searchQuery}»</span>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|