65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
|
export default function StorageBreakdown() {
|
||
|
|
return (
|
||
|
|
<div className="storage-breakdown block-wrapper">
|
||
|
|
<h3 className="chart-title">Использование хранилища</h3>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon photos">📸</div>
|
||
|
|
<span>Изображения</span>
|
||
|
|
</div>
|
||
|
|
<div>0 МБ</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon videos">🎬</div>
|
||
|
|
<span>Видео</span>
|
||
|
|
</div>
|
||
|
|
<div>0 МБ</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon audio">🎵</div>
|
||
|
|
<span>Аудио</span>
|
||
|
|
</div>
|
||
|
|
<div>0 МБ</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon documents">📄</div>
|
||
|
|
<span>Документы</span>
|
||
|
|
</div>
|
||
|
|
<div>0 КБ</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon code">💻</div>
|
||
|
|
<span>Код (PHP/JS)</span>
|
||
|
|
</div>
|
||
|
|
<div>0 Б</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-item">
|
||
|
|
<div className="storage-type">
|
||
|
|
<div className="storage-icon text">📝</div>
|
||
|
|
<span>Текст</span>
|
||
|
|
</div>
|
||
|
|
<div>0 Б</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="storage-footer">
|
||
|
|
<div className="storage-footer-header">
|
||
|
|
<span className="storage-footer-title">Общий объем:</span>
|
||
|
|
<span className="storage-footer-weight">0 МБ</span>
|
||
|
|
</div>
|
||
|
|
<div className="progress-bar">
|
||
|
|
<div className="progress-fill" style={{ width: "50%" }}></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|