denozord
27dade3eda
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m47s
89 lines
2.6 KiB
React
89 lines
2.6 KiB
React
import { useState, useEffect } from 'react'
|
|
import { IconClock, IconCheck } from '@tabler/icons-react'
|
|
import { formatDateTimeHuman } from '../lib/datetime.js'
|
|
|
|
/**
|
|
* LastSaved - компонент для отображения времени последнего сохранения
|
|
* Показывает относительное время ("2 минуты назад") с автообновлением
|
|
*/
|
|
function LastSaved({ timestamp, variant = 'default' }) {
|
|
const [relativeTime, setRelativeTime] = useState('')
|
|
|
|
useEffect(() => {
|
|
const updateRelativeTime = () => {
|
|
if (!timestamp) {
|
|
setRelativeTime('')
|
|
return
|
|
}
|
|
|
|
const now = Date.now()
|
|
const time = new Date(timestamp).getTime()
|
|
const diffMs = now - time
|
|
const diffSec = Math.floor(diffMs / 1000)
|
|
const diffMin = Math.floor(diffSec / 60)
|
|
const diffHour = Math.floor(diffMin / 60)
|
|
const diffDay = Math.floor(diffHour / 24)
|
|
|
|
if (diffSec < 10) {
|
|
setRelativeTime('только что')
|
|
} else if (diffSec < 60) {
|
|
setRelativeTime(`${diffSec} сек назад`)
|
|
} else if (diffMin < 60) {
|
|
setRelativeTime(`${diffMin} мин назад`)
|
|
} else if (diffHour < 24) {
|
|
setRelativeTime(`${diffHour} ч назад`)
|
|
} else {
|
|
setRelativeTime(`${diffDay} дн назад`)
|
|
}
|
|
}
|
|
|
|
updateRelativeTime()
|
|
const interval = setInterval(updateRelativeTime, 10000) // обновляем каждые 10 секунд
|
|
|
|
return () => clearInterval(interval)
|
|
}, [timestamp])
|
|
|
|
if (!timestamp) return null
|
|
|
|
const absoluteTime = formatDateTimeHuman(timestamp)
|
|
|
|
// Варианты отображения
|
|
if (variant === 'badge') {
|
|
return (
|
|
<span
|
|
className="badge bg-success-lt text-success"
|
|
title={`Последнее сохранение: ${absoluteTime}`}
|
|
>
|
|
<IconCheck size={14} className="me-1" />
|
|
Сохранено {relativeTime}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
if (variant === 'compact') {
|
|
return (
|
|
<span
|
|
className="text-muted small"
|
|
title={`Последнее сохранение: ${absoluteTime}`}
|
|
>
|
|
<IconClock size={14} className="me-1" style={{ verticalAlign: 'middle' }} />
|
|
{relativeTime}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// Вариант по умолчанию
|
|
return (
|
|
<div
|
|
className="text-muted small d-flex align-items-center"
|
|
title={absoluteTime}
|
|
>
|
|
<IconClock size={16} className="me-1" />
|
|
<span>Последнее сохранение: {relativeTime}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LastSaved
|
|
|