73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Card } from '../../ui/card';
|
||
|
|
import { Button } from '../../ui/button';
|
||
|
|
import { Download, FileText, Shield } from 'lucide-react';
|
||
|
|
import { DataExportModal } from './DataExportModal';
|
||
|
|
|
||
|
|
export const DataExportView: React.FC = () => {
|
||
|
|
const [showModal, setShowModal] = useState(false);
|
||
|
|
|
||
|
|
// Mock History
|
||
|
|
const [exports] = useState([
|
||
|
|
{ id: 'e1', date: 'Oct 10, 2023', type: 'Full Archive (JSON)', status: 'ready', size: '45 MB' },
|
||
|
|
{ id: 'e2', date: 'Jan 15, 2023', type: 'Profile Only (CSV)', status: 'expired', size: '2 MB' },
|
||
|
|
]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-4xl mx-auto space-y-8 animate-fadeIn pb-20">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-2xl font-bold text-white mb-2">YOUR DATA</h2>
|
||
|
|
<p className="text-gray-400 font-mono text-sm">Manage, export, and control your personal information.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Card variant="default">
|
||
|
|
<div className="flex items-start gap-4 mb-6">
|
||
|
|
<div className="p-3 bg-kodo-cyan/10 rounded-full text-kodo-cyan">
|
||
|
|
<Shield className="w-6 h-6" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="font-bold text-white text-lg">Request Data Archive</h3>
|
||
|
|
<p className="text-gray-400 text-sm mt-1 max-w-xl">
|
||
|
|
You can request a download of all the data Veza has associated with your account.
|
||
|
|
This includes your profile, uploaded content metadata, comments, and purchase history.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Button variant="primary" icon={<Download className="w-4 h-4" />} onClick={() => setShowModal(true)}>
|
||
|
|
Start New Export
|
||
|
|
</Button>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card variant="default">
|
||
|
|
<h3 className="font-bold text-white mb-4">Export History</h3>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{exports.map(item => (
|
||
|
|
<div key={item.id} className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel">
|
||
|
|
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
|
||
|
|
<FileText className="w-5 h-5 text-gray-500" />
|
||
|
|
<div>
|
||
|
|
<div className="text-white font-bold text-sm">{item.type}</div>
|
||
|
|
<div className="text-xs text-gray-500 flex gap-2">
|
||
|
|
<span>{item.date}</span>
|
||
|
|
<span>•</span>
|
||
|
|
<span>{item.size}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{item.status === 'ready' ? (
|
||
|
|
<Button variant="secondary" size="sm" icon={<Download className="w-4 h-4" />}>Download</Button>
|
||
|
|
) : (
|
||
|
|
<span className="text-xs text-gray-500 bg-gray-800 px-3 py-1 rounded">Expired</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{showModal && <DataExportModal onClose={() => setShowModal(false)} onRequest={() => {}} />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|