arsam/CShare
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Import source: cshare-app/src/components/SkeletonLoader

Browse Source 
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
2026-09-18 23:14:16 +03:30
parent 7d854b0d24
commit 0b36b15dfa
1 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cshare-app/src/components/SkeletonLoader.jsx
+115
View File
@@ -0,0 +1,115 @@
export function Skeleton({ width, height, radius = 'var(--radius-sm)', style = {} }) {
return (
<div
className="skeleton"
style={{
width: width ?? '100%',
height: height ?? '16px',
borderRadius: radius,
...style,
}}
/>
);
}
export function SkeletonCard({ lines = 3, hasAvatar = false }) {
return (
<div style={{ padding: '24px' }}>
{hasAvatar && (
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
<Skeleton width="40px" height="40px" radius="50%" />
<div style={{ flex: 1 }}>
<Skeleton width="60%" height="14px" style={{ marginBottom: '6px' }} />
<Skeleton width="40%" height="12px" />
</div>
</div>
)}
{Array.from({ length: lines }).map((_, i) => (
<Skeleton
key={i}
width={i === lines - 1 ? '45%' : '100%'}
height="12px"
style={{ marginBottom: i < lines - 1 ? '8px' : 0 }}
/>
))}
</div>
);
}
export function SkeletonStatCards({ count = 3 }) {
return (
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: '16px',
}}>
{Array.from({ length: count }).map((_, i) => (
<div
key={i}
className="card"
style={{ padding: '20px 24px' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
<Skeleton width="80px" height="10px" />
<Skeleton width="32px" height="32px" radius="var(--radius-sm)" />
</div>
<Skeleton width="60%" height="36px" style={{ marginBottom: '8px' }} />
<Skeleton width="90px" height="12px" />
</div>
))}
</div>
);
}
export function SkeletonFileRows({ count = 5 }) {
return (
<div style={{
background: 'var(--bg-elevated)',
border: '1px solid var(--border-subtle)',
borderRadius: 'var(--radius-lg)',
overflow: 'hidden',
}}>
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 100px 120px 80px 80px 120px',
gap: '12px',
padding: '14px 20px',
borderBottom: '1px solid var(--border-subtle)',
}}>
{['File', 'Size', 'Expiry', 'Views', 'DL', 'Actions'].map((h) => (
<Skeleton key={h} width="100%" height="10px" />
))}
</div>
{Array.from({ length: count }).map((_, i) => (
<div
key={i}
style={{
display: 'grid',
gridTemplateColumns: '1fr 100px 120px 80px 80px 120px',
gap: '12px',
alignItems: 'center',
padding: '16px 20px',
borderBottom: '1px solid var(--border-subtle)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Skeleton width="36px" height="36px" radius="var(--radius-sm)" />
<div style={{ flex: 1 }}>
<Skeleton width="70%" height="14px" style={{ marginBottom: '4px' }} />
<Skeleton width="40%" height="10px" />
</div>
</div>
<Skeleton width="60px" height="12px" />
<Skeleton width="80px" height="12px" />
<Skeleton width="24px" height="12px" />
<Skeleton width="24px" height="12px" />
<div style={{ display: 'flex', gap: '4px' }}>
<Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
<Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
<Skeleton width="28px" height="28px" radius="var(--radius-sm)" />
</div>
</div>
))}
</div>
);
}