Enhance download center with file size preview and dual options
This commit is contained in:
backuppc
119
components/DownloadModal.tsx
Normal file
119
components/DownloadModal.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Download, Package, Server, X } from 'lucide-react';
|
||||
import { formatBytes } from '../utils/formatters';
|
||||
|
||||
interface DownloadModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const DownloadModal: React.FC<DownloadModalProps> = ({ isOpen, onClose }) => {
|
||||
const [sizes, setSizes] = useState({ full: 0, backend: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Fetch sizes
|
||||
const fetchSize = async (url: string, key: 'full' | 'backend') => {
|
||||
try {
|
||||
const res = await fetch(url, { method: 'HEAD' });
|
||||
const len = res.headers.get('content-length');
|
||||
if (len) setSizes(prev => ({ ...prev, [key]: parseInt(len, 10) }));
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch size", e);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSize(`${import.meta.env.BASE_URL}webftp.exe`, 'full');
|
||||
fetchSize(`${import.meta.env.BASE_URL}webftp-backend.exe`, 'backend');
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-lg shadow-xl w-[500px] max-w-full m-4 overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-slate-50">
|
||||
<h3 className="font-bold text-slate-800 flex items-center gap-2">
|
||||
<Download size={20} className="text-blue-600" />
|
||||
WebZilla 다운로드 센터
|
||||
</h3>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
<p className="text-sm text-slate-500 mb-4">
|
||||
사용 환경에 맞는 실행 파일을 선택하여 다운로드하세요.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{/* Option 1: Full Version */}
|
||||
<a
|
||||
href={`${import.meta.env.BASE_URL}webftp.exe`}
|
||||
download="webftp.exe"
|
||||
className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 hover:border-blue-400 hover:bg-blue-50 transition-all group relative"
|
||||
>
|
||||
<div className="p-3 bg-blue-100 text-blue-600 rounded-lg group-hover:bg-blue-200 transition-colors">
|
||||
<Package size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-bold text-slate-800">단일 실행 파일 (All-in-One)</h4>
|
||||
<span className="text-xs font-mono bg-slate-100 px-2 py-0.5 rounded text-slate-500">
|
||||
{sizes.full > 0 ? formatBytes(sizes.full) : 'Loading...'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
설치가 필요 없으며, 프론트엔드와 백엔드가 하나로 통합되어 있습니다.
|
||||
<span className="block text-blue-600 mt-1 font-semibold">가장 추천하는 방식입니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
<Download size={16} className="absolute top-4 right-4 text-slate-300 group-hover:text-blue-500" />
|
||||
</a>
|
||||
|
||||
{/* Option 2: Backend Only */}
|
||||
<a
|
||||
href={`${import.meta.env.BASE_URL}webftp-backend.exe`}
|
||||
download="webftp-backend.exe"
|
||||
className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 hover:border-emerald-400 hover:bg-emerald-50 transition-all group relative"
|
||||
>
|
||||
<div className="p-3 bg-emerald-100 text-emerald-600 rounded-lg group-hover:bg-emerald-200 transition-colors">
|
||||
<Server size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-bold text-slate-800">백엔드 전용 (Backend Only)</h4>
|
||||
<span className="text-xs font-mono bg-slate-100 px-2 py-0.5 rounded text-slate-500">
|
||||
{sizes.backend > 0 ? formatBytes(sizes.backend) : 'Loading...'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
정적 파일 호스팅을 별도로 하거나, 서버 리소스를 최소화해야 할 때 사용하세요.
|
||||
(프론트엔드 파일 미포함)
|
||||
</p>
|
||||
</div>
|
||||
<Download size={16} className="absolute top-4 right-4 text-slate-300 group-hover:text-emerald-500" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-4 py-3 bg-slate-50 border-t border-slate-100 text-right">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded hover:bg-slate-50 text-sm font-medium shadow-sm"
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadModal;
|
||||
Reference in New Issue
Block a user