mirror of
https://github.com/gromlab-ru/svg-sprites.git
synced 2026-07-22 04:40:17 +03:00
refactor: заменить shiki на самописный highlighter и обновить архитектуру
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml - CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts - Превью переработано: React-приложение вместо инлайн HTML - Добавлен футер с названием пакета и ссылкой на репозиторий - Исправлена загрузка dev-data.js для Vite 8 - Футер прижат к низу, содержимое центрировано
This commit is contained in:
51
preview/src/ui/icon-grid/icon-grid.ui.tsx
Normal file
51
preview/src/ui/icon-grid/icon-grid.ui.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import cl from 'clsx'
|
||||
import { IconCard } from '../icon-card'
|
||||
import type { IconGridProps } from './types/icon-grid.type'
|
||||
import styles from './styles/icon-grid.module.css'
|
||||
|
||||
/**
|
||||
* Сетка иконок, сгруппированная по спрайтам.
|
||||
*
|
||||
* Используется для:
|
||||
* - отображения всех иконок из всех спрайтов
|
||||
* - фильтрации иконок по поисковому запросу
|
||||
*/
|
||||
export const IconGrid = (props: IconGridProps) => {
|
||||
const { groups, searchQuery = '', onIconSelect, className, ...htmlAttr } = props
|
||||
|
||||
const query = searchQuery.toLowerCase()
|
||||
|
||||
return (
|
||||
<div {...htmlAttr} className={cl(styles.root, className)}>
|
||||
{groups.map((group) => {
|
||||
const filteredIcons = query
|
||||
? group.icons.filter((icon) => icon.id.includes(query))
|
||||
: group.icons
|
||||
|
||||
const isGroupHidden = filteredIcons.length === 0
|
||||
|
||||
return (
|
||||
<section
|
||||
key={group.name}
|
||||
className={cl(styles.group, isGroupHidden && styles._hidden)}
|
||||
>
|
||||
<h2 className={styles.groupHeader}>
|
||||
{group.name}
|
||||
<span className={styles.badge}>{group.mode}</span>
|
||||
<span className={styles.count}>{group.icons.length}</span>
|
||||
</h2>
|
||||
<div className={styles.grid}>
|
||||
{filteredIcons.map((icon) => (
|
||||
<IconCard
|
||||
key={icon.id}
|
||||
iconId={icon.id}
|
||||
onSelect={onIconSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user