Kirill
101 lines
3.4 KiB
TypeScript
101 lines
3.4 KiB
TypeScript
import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
|
|
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
|
|
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
|
|
import Box from '@mui/material/Box'
|
|
import Chip from '@mui/material/Chip'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import Tooltip from '@mui/material/Tooltip'
|
|
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
|
|
import type { GalleryImageItem } from '../model/types'
|
|
|
|
type Props = {
|
|
items: GalleryImageItem[]
|
|
deleting?: boolean
|
|
resizing?: string | null
|
|
onDelete: (id: string) => void
|
|
onResize: (id: string) => void
|
|
}
|
|
|
|
export function GalleryGrid({ items, deleting, resizing, onDelete, onResize }: Props) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
gap: 2,
|
|
}}
|
|
>
|
|
{items.map((item) => (
|
|
<Box
|
|
key={item.id}
|
|
sx={{
|
|
position: 'relative',
|
|
borderRadius: 1,
|
|
overflow: 'hidden',
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
aspectRatio: '1',
|
|
}}
|
|
>
|
|
<OptimizedImage
|
|
src={item.url}
|
|
alt=""
|
|
sizes="140px"
|
|
sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
<Box sx={{ position: 'absolute', top: 4, left: 4 }}>
|
|
{item.isResized ? (
|
|
<Chip
|
|
label="Готово"
|
|
size="small"
|
|
color="success"
|
|
icon={<CheckCircleOutlineOutlinedIcon fontSize="small" />}
|
|
sx={{ height: 24, '& .MuiChip-label': { px: 0.75 }, '& .MuiChip-icon': { fontSize: 14, ml: 0.5 } }}
|
|
/>
|
|
) : (
|
|
<Chip
|
|
label="Не обработано"
|
|
size="small"
|
|
color="warning"
|
|
sx={{ height: 24, '& .MuiChip-label': { px: 0.75 } }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
<Box sx={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 0.5 }}>
|
|
{!item.isResized && (
|
|
<Tooltip title="Обработать (resize)">
|
|
<IconButton
|
|
size="small"
|
|
color="primary"
|
|
sx={{
|
|
bgcolor: 'background.paper',
|
|
'&:hover': { bgcolor: 'primary.light', color: 'primary.contrastText' },
|
|
}}
|
|
disabled={resizing === item.id}
|
|
onClick={() => onResize(item.id)}
|
|
>
|
|
<AutoFixHighOutlinedIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
<Tooltip title="Удалить из галереи">
|
|
<IconButton
|
|
size="small"
|
|
color="error"
|
|
sx={{
|
|
bgcolor: 'background.paper',
|
|
'&:hover': { bgcolor: 'error.light', color: 'error.contrastText' },
|
|
}}
|
|
disabled={deleting}
|
|
onClick={() => onDelete(item.id)}
|
|
>
|
|
<DeleteOutlineOutlinedIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)
|
|
}
|