53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
import React, { useRef } from 'react';
|
|
|
|
/**
|
|
* Component for static site deployment options
|
|
* @param {Object} props - Component props
|
|
* @param {string} props.fileName - Selected file name
|
|
* @param {Function} props.onFileChange - Handler for file change
|
|
* @returns {JSX.Element} - Rendered component
|
|
*/
|
|
const StaticDeployment = ({ fileName, onFileChange }) => {
|
|
const fileInputRef = useRef(null);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-neutral-700/50 rounded-md text-neutral-300 text-center">
|
|
Upload the zip file containing your static website
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<label htmlFor="file-upload" className="block text-white font-medium mb-2">Upload File (ZIP/TAR)</label>
|
|
<div className="flex items-center justify-center w-full">
|
|
<label
|
|
htmlFor="file-upload"
|
|
className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer border-neutral-600 hover:border-[#6d9e37]"
|
|
>
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<span className="text-3xl mb-3 text-neutral-400">📁</span>
|
|
<p className="mb-2 text-sm text-neutral-400">
|
|
<span className="font-semibold">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p className="text-xs text-neutral-500">ZIP or TAR files only (max. 100MB)</p>
|
|
</div>
|
|
<input
|
|
id="file-upload"
|
|
ref={fileInputRef}
|
|
type="file"
|
|
onChange={onFileChange}
|
|
className="hidden"
|
|
accept=".zip,.tar"
|
|
/>
|
|
</label>
|
|
</div>
|
|
{fileName && (
|
|
<div className="mt-2 text-sm text-neutral-400">
|
|
Selected file: {fileName}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StaticDeployment; |