67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { Activity, BarChart3, Video } from 'lucide-react';
|
||
import { formatDateTime } from '../../../utils/format';
|
||
|
||
type OverviewViewProps = {
|
||
edgeId: string;
|
||
latestUpdatedAt?: Date;
|
||
liveCount: number;
|
||
totalTags: number;
|
||
onOpenArchive: () => void;
|
||
onOpenIndicators: () => void;
|
||
onOpenVideo: () => void;
|
||
};
|
||
|
||
export function OverviewView({
|
||
edgeId,
|
||
latestUpdatedAt,
|
||
liveCount,
|
||
totalTags,
|
||
onOpenArchive,
|
||
onOpenIndicators,
|
||
onOpenVideo
|
||
}: OverviewViewProps) {
|
||
return (
|
||
<section className="detail-overview">
|
||
<div className="summary-grid">
|
||
<div className="summary-card">
|
||
<span>Всего показателей</span>
|
||
<strong>{totalTags}</strong>
|
||
</div>
|
||
<div className="summary-card">
|
||
<span>Live</span>
|
||
<strong>{liveCount}</strong>
|
||
</div>
|
||
<div className="summary-card">
|
||
<span>Архив</span>
|
||
<strong>1</strong>
|
||
</div>
|
||
<div className="summary-card">
|
||
<span>Последнее обновление</span>
|
||
<strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '-'}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<section className="detail-action-panel">
|
||
<div>
|
||
<span className="page-kicker">Разделы</span>
|
||
<h2>{edgeId}</h2>
|
||
</div>
|
||
<div className="detail-action-grid">
|
||
<button type="button" onClick={onOpenIndicators}>
|
||
<Activity size={18} />
|
||
Текущие показатели
|
||
</button>
|
||
<button type="button" onClick={onOpenArchive}>
|
||
<BarChart3 size={18} />
|
||
Архив и график
|
||
</button>
|
||
<button type="button" onClick={onOpenVideo}>
|
||
<Video size={18} />
|
||
Видео
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
);
|
||
}
|