Import source: cshare-app/src/pages/FileViewPage
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,576 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { DownloadIcon, CopyIcon, CheckIcon, ClockIcon, ShieldIcon } from '../components/Icons';
|
||||||
|
import { sharedFile, formatFileSize, formatDate, getFileIcon, getFileIconColor } from '../data/mockData';
|
||||||
|
import { useToast } from '../components/ToastContext';
|
||||||
|
import { downloadUrl, previewUrl, resolveLink } from '../lib/api';
|
||||||
|
|
||||||
|
function useCountdown(targetDate) {
|
||||||
|
const [timeLeft, setTimeLeft] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const update = () => {
|
||||||
|
const diff = new Date(targetDate) - new Date();
|
||||||
|
if (diff <= 0) { setTimeLeft('Expired'); return; }
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
|
||||||
|
const mins = Math.floor((diff / (1000 * 60)) % 60);
|
||||||
|
const secs = Math.floor((diff / 1000) % 60);
|
||||||
|
if (days > 0) {
|
||||||
|
setTimeLeft(`${days}d ${hours}h ${mins}m ${secs}s`);
|
||||||
|
} else {
|
||||||
|
setTimeLeft(`${hours}h ${mins}m ${secs}s`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
update();
|
||||||
|
const id = setInterval(update, 1000);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, [targetDate]);
|
||||||
|
|
||||||
|
return timeLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilePreview({ file, linkId }) {
|
||||||
|
const [text, setText] = useState('');
|
||||||
|
const [textError, setTextError] = useState('');
|
||||||
|
const [zoom, setZoom] = useState(1);
|
||||||
|
const [rotation, setRotation] = useState(0);
|
||||||
|
const [copiedText, setCopiedText] = useState(false);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const addToast = useToast();
|
||||||
|
const preview = file.preview;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!linkId || preview?.kind !== 'text') return;
|
||||||
|
let active = true;
|
||||||
|
fetch(previewUrl(linkId))
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) throw new Error('Preview unavailable');
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then((body) => {
|
||||||
|
if (active) setText(body.slice(0, 120_000));
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (active) setTextError(err.message);
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
};
|
||||||
|
}, [linkId, preview?.kind]);
|
||||||
|
|
||||||
|
const copyTextContent = () => {
|
||||||
|
navigator.clipboard?.writeText(text);
|
||||||
|
setCopiedText(true);
|
||||||
|
addToast('Preview text copied to clipboard', 'success');
|
||||||
|
setTimeout(() => setCopiedText(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!linkId || !preview?.available) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: '14px 16px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
borderRadius: 'var(--radius-md)',
|
||||||
|
color: 'var(--text-muted)',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
marginBottom: '20px',
|
||||||
|
}}>
|
||||||
|
Preview is available for small images, PDFs, text, audio, and video files.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const src = previewUrl(linkId);
|
||||||
|
const shellStyle = {
|
||||||
|
marginBottom: '20px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
borderRadius: 'var(--radius-md)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (preview.kind === 'image') {
|
||||||
|
return (
|
||||||
|
<div style={{ ...shellStyle, display: 'flex', flexDirection: 'column' }}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
gap: '8px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
background: 'var(--bg-elevated)',
|
||||||
|
borderBottom: '1px solid var(--border-subtle)'
|
||||||
|
}}>
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => setZoom(z => Math.max(0.5, z - 0.25))} style={{ padding: '4px 8px', fontSize: '0.75rem' }}>Zoom -</button>
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => { setZoom(1); setRotation(0); }} style={{ padding: '4px 8px', fontSize: '0.75rem' }}>Reset</button>
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => setZoom(z => Math.min(3, z + 0.25))} style={{ padding: '4px 8px', fontSize: '0.75rem' }}>Zoom +</button>
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => setRotation(r => (r + 90) % 360)} style={{ padding: '4px 8px', fontSize: '0.75rem' }}>Rotate ↻</button>
|
||||||
|
</div>
|
||||||
|
{/* Canvas container */}
|
||||||
|
<div style={{
|
||||||
|
overflow: 'hidden',
|
||||||
|
maxHeight: '520px',
|
||||||
|
height: '420px',
|
||||||
|
display: 'grid',
|
||||||
|
placeItems: 'center',
|
||||||
|
background: '#09090b',
|
||||||
|
position: 'relative',
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt={file.name}
|
||||||
|
style={{
|
||||||
|
maxWidth: '100%',
|
||||||
|
maxHeight: '100%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
transform: `scale(${zoom}) rotate(${rotation}deg)`,
|
||||||
|
transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Zoom badge */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '12px',
|
||||||
|
right: '12px',
|
||||||
|
background: 'rgba(0, 0, 0, 0.75)',
|
||||||
|
border: '1px solid var(--border)',
|
||||||
|
borderRadius: 'var(--radius-sm)',
|
||||||
|
padding: '3px 8px',
|
||||||
|
fontSize: '0.6875rem',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
}}>
|
||||||
|
{Math.round(zoom * 100)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (preview.kind === 'video') {
|
||||||
|
return (
|
||||||
|
<div style={{ ...shellStyle, position: 'relative' }}>
|
||||||
|
<video controls preload="metadata" src={src} style={{ display: 'block', width: '100%', maxHeight: '520px', background: '#000' }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (preview.kind === 'audio') {
|
||||||
|
return (
|
||||||
|
<div style={{ ...shellStyle, padding: '18px', background: 'var(--bg-surface)' }}>
|
||||||
|
<audio controls preload="metadata" src={src} style={{ display: 'block', width: '100%' }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (preview.kind === 'pdf') {
|
||||||
|
return (
|
||||||
|
<div style={{ ...shellStyle, height: '520px' }}>
|
||||||
|
<iframe src={src} title={`Preview of ${file.name}`} style={{ border: 0, width: '100%', height: '100%' }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (preview.kind === 'text') {
|
||||||
|
const lines = text.split('\n');
|
||||||
|
const filteredLines = searchTerm
|
||||||
|
? lines.map((line, idx) => ({ line, idx })).filter(item => item.line.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||||
|
: lines.map((line, idx) => ({ line, idx }));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ ...shellStyle, display: 'flex', flexDirection: 'column' }}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
background: 'var(--bg-elevated)',
|
||||||
|
borderBottom: '1px solid var(--border-subtle)',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="input"
|
||||||
|
placeholder="Search text..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
style={{
|
||||||
|
padding: '4px 10px',
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
maxWidth: '180px',
|
||||||
|
height: '28px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={copyTextContent} style={{ padding: '4px 8px', fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||||
|
<CopyIcon size={12} /> {copiedText ? 'Copied!' : 'Copy Text'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* Text Area */}
|
||||||
|
<div style={{
|
||||||
|
maxHeight: '420px',
|
||||||
|
overflow: 'auto',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
display: 'flex',
|
||||||
|
fontFamily: 'var(--font-mono, monospace)',
|
||||||
|
fontSize: '0.8125rem',
|
||||||
|
lineHeight: 1.6,
|
||||||
|
}}>
|
||||||
|
{textError ? (
|
||||||
|
<div style={{ padding: '16px', color: 'var(--danger)' }}>{textError}</div>
|
||||||
|
) : !text ? (
|
||||||
|
<div style={{ padding: '16px', color: 'var(--text-muted)' }}>Loading preview...</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'flex', width: '100%' }}>
|
||||||
|
{/* Line Numbers gutter */}
|
||||||
|
<div style={{
|
||||||
|
padding: '16px 12px',
|
||||||
|
borderRight: '1px solid var(--border-subtle)',
|
||||||
|
background: 'var(--bg-elevated)',
|
||||||
|
color: 'var(--text-muted)',
|
||||||
|
textAlign: 'right',
|
||||||
|
userSelect: 'none',
|
||||||
|
minWidth: '40px',
|
||||||
|
}}>
|
||||||
|
{filteredLines.map((item) => (
|
||||||
|
<div key={item.idx}>{item.idx + 1}</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* Lines Content */}
|
||||||
|
<pre style={{
|
||||||
|
margin: 0,
|
||||||
|
padding: '16px',
|
||||||
|
flex: 1,
|
||||||
|
overflow: 'auto',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
}}>
|
||||||
|
{filteredLines.map((item) => (
|
||||||
|
<div key={item.idx} style={{
|
||||||
|
background: searchTerm && item.line.toLowerCase().includes(searchTerm.toLowerCase()) ? 'rgba(74,144,255,0.15)' : 'transparent',
|
||||||
|
}}>
|
||||||
|
{item.line || ' '}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FileViewPage() {
|
||||||
|
const { linkId } = useParams();
|
||||||
|
const [file, setFile] = useState(sharedFile);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const [downloading, setDownloading] = useState(false);
|
||||||
|
const [downloadProgress, setDownloadProgress] = useState(0);
|
||||||
|
const addToast = useToast();
|
||||||
|
const countdown = useCountdown(file.expiresAt);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!linkId) return;
|
||||||
|
let active = true;
|
||||||
|
resolveLink(linkId)
|
||||||
|
.then((remoteFile) => {
|
||||||
|
if (!active) return;
|
||||||
|
setFile(remoteFile);
|
||||||
|
setError('');
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (!active) return;
|
||||||
|
setError(err.message);
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
active = false;
|
||||||
|
};
|
||||||
|
}, [linkId]);
|
||||||
|
|
||||||
|
const copyLink = () => {
|
||||||
|
navigator.clipboard?.writeText(file.link);
|
||||||
|
setCopied(true);
|
||||||
|
addToast('Link copied to clipboard', 'success');
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
if (linkId) {
|
||||||
|
setDownloading(true);
|
||||||
|
setDownloadProgress(100);
|
||||||
|
window.location.href = downloadUrl(linkId);
|
||||||
|
setTimeout(() => {
|
||||||
|
setDownloading(false);
|
||||||
|
setDownloadProgress(0);
|
||||||
|
}, 1200);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDownloading(true);
|
||||||
|
setDownloadProgress(0);
|
||||||
|
|
||||||
|
let progress = 0;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
progress += Math.random() * 20 + 10;
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
clearInterval(interval);
|
||||||
|
setDownloadProgress(100);
|
||||||
|
setTimeout(() => {
|
||||||
|
setDownloading(false);
|
||||||
|
setDownloadProgress(0);
|
||||||
|
addToast('Download complete — this is a demo', 'success');
|
||||||
|
}, 400);
|
||||||
|
} else {
|
||||||
|
setDownloadProgress(Math.min(progress, 99));
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-enter" style={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '24px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
{/* Animated background orbs */}
|
||||||
|
<div className="orb orb-1" style={{ top: '10%', left: '-5%', opacity: 0.4 }} />
|
||||||
|
<div className="orb orb-3" style={{ bottom: '10%', right: '-5%', opacity: 0.3 }} />
|
||||||
|
|
||||||
|
<div style={{ maxWidth: file.preview?.available ? '840px' : '480px', width: '100%', position: 'relative', zIndex: 1 }}>
|
||||||
|
{/* Header badge */}
|
||||||
|
<div style={{ textAlign: 'center', marginBottom: '32px', animation: 'fadeIn 0.4s ease' }}>
|
||||||
|
<div style={{
|
||||||
|
width: '56px',
|
||||||
|
height: '56px',
|
||||||
|
margin: '0 auto 16px',
|
||||||
|
borderRadius: '16px',
|
||||||
|
background: 'var(--accent-muted)',
|
||||||
|
border: '1px solid var(--accent-border)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'var(--accent)',
|
||||||
|
animation: 'pulseGlow 3s ease-in-out infinite',
|
||||||
|
}}>
|
||||||
|
<ShieldIcon size={24} />
|
||||||
|
</div>
|
||||||
|
<h1 className="heading-md" style={{ marginBottom: '8px' }}>
|
||||||
|
Shared with you
|
||||||
|
</h1>
|
||||||
|
<p className="text-secondary" style={{ fontSize: '0.9375rem' }}>
|
||||||
|
{error || 'Someone shared this file via CShare. Download it before the link expires.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* File card with glow */}
|
||||||
|
<div
|
||||||
|
className="card glow-card"
|
||||||
|
style={{
|
||||||
|
padding: '28px',
|
||||||
|
animation: 'scaleIn 0.4s 0.1s ease both',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Accent bar with glow */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: '3px',
|
||||||
|
background: 'linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent))',
|
||||||
|
backgroundSize: '200% 100%',
|
||||||
|
animation: 'gradientMove 3s ease infinite',
|
||||||
|
boxShadow: '0 2px 12px rgba(74, 144, 255, 0.3)',
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* File icon + name */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '16px', marginBottom: '24px' }}>
|
||||||
|
<div style={{
|
||||||
|
width: '56px',
|
||||||
|
height: '56px',
|
||||||
|
borderRadius: 'var(--radius-md)',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
color: getFileIconColor(file.type),
|
||||||
|
flexShrink: 0,
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
}}>
|
||||||
|
{getFileIcon(file.type)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<h3 style={{
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '1.0625rem',
|
||||||
|
marginBottom: '4px',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
}}>
|
||||||
|
{file.name}
|
||||||
|
</h3>
|
||||||
|
<div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)' }}>
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metadata grid */}
|
||||||
|
<div style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: '1fr 1fr',
|
||||||
|
gap: '16px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
padding: '16px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
borderRadius: 'var(--radius-md)',
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
}}>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||||
|
Uploaded by
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: '0.9375rem' }}>
|
||||||
|
{file.uploader}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||||
|
Uploaded on
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: '0.9375rem' }}>
|
||||||
|
{formatDate(file.uploadedAt)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||||
|
Expires
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '0.9375rem',
|
||||||
|
color: 'var(--accent)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '6px',
|
||||||
|
}}>
|
||||||
|
<ClockIcon size={14} />
|
||||||
|
{countdown}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||||
|
Views
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: '0.9375rem' }}>
|
||||||
|
{file.views}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FilePreview file={file} linkId={linkId} />
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-lg"
|
||||||
|
onClick={handleDownload}
|
||||||
|
disabled={downloading || Boolean(error)}
|
||||||
|
style={{ width: '100%', position: 'relative', overflow: 'hidden' }}
|
||||||
|
>
|
||||||
|
{downloading ? (
|
||||||
|
<>
|
||||||
|
<span style={{
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
border: '2px solid var(--bg-primary)',
|
||||||
|
borderTopColor: 'transparent',
|
||||||
|
borderRadius: '50%',
|
||||||
|
animation: 'spin 0.6s linear infinite',
|
||||||
|
display: 'inline-block',
|
||||||
|
}} />
|
||||||
|
{downloadProgress >= 100 ? 'Complete!' : `${Math.round(downloadProgress)}%`}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DownloadIcon size={18} />
|
||||||
|
Download File
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Download progress bar */}
|
||||||
|
{downloading && (
|
||||||
|
<div style={{
|
||||||
|
height: '3px',
|
||||||
|
borderRadius: '2px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
animation: 'fadeIn 0.2s ease',
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
className="shimmer-progress"
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
width: `${downloadProgress}%`,
|
||||||
|
borderRadius: '2px',
|
||||||
|
background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
|
||||||
|
transition: 'width 0.2s ease',
|
||||||
|
boxShadow: '0 0 8px rgba(74, 144, 255, 0.3)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary"
|
||||||
|
onClick={copyLink}
|
||||||
|
style={{ width: '100%', transition: 'all var(--transition-base)' }}
|
||||||
|
>
|
||||||
|
{copied ? <CheckIcon size={16} style={{ color: 'var(--success)' }} /> : <CopyIcon size={16} />}
|
||||||
|
{copied ? 'Link Copied' : 'Copy Share Link'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trust footer */}
|
||||||
|
<div style={{
|
||||||
|
marginTop: '24px',
|
||||||
|
textAlign: 'center',
|
||||||
|
animation: 'fadeIn 0.4s 0.3s ease both',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '6px',
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
color: 'var(--text-muted)',
|
||||||
|
}}>
|
||||||
|
<ShieldIcon size={14} />
|
||||||
|
End-to-end encrypted and auto-expiring
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user