162 lines
3.2 KiB
TypeScript
162 lines
3.2 KiB
TypeScript
/* deleted */
|
|
|
|
/* .storage-breakdown {
|
|
.storage-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.storage-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
|
|
&.storage-icon.photos {
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
&.storage-icon.videos {
|
|
background: #f3e8ff;
|
|
color: #7c3aed;
|
|
}
|
|
|
|
&.storage-icon.audio {
|
|
background: #d1fae5;
|
|
color: #059669;
|
|
}
|
|
|
|
&.storage-icon.documents {
|
|
background: #fed7d7;
|
|
color: #dc2626;
|
|
}
|
|
|
|
&.storage-icon.code {
|
|
background: #e0e7ff;
|
|
color: #4f46e5;
|
|
}
|
|
|
|
&.storage-icon.text {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
}
|
|
|
|
.storage-type {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.storage-footer {
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.storage-footer-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.storage-footer-title {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.storage-footer-weight {
|
|
font-weight: 600;
|
|
color: #6366f1;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.progress-bar {
|
|
background: #f1f5f9;
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #10b981, #059669);
|
|
border-radius: 10px;
|
|
transition: width 0.8s ease;
|
|
}
|
|
} */
|
|
|
|
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>
|
|
)
|
|
} |