6974c12a25
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid - Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px) - Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation - Modified files across all components to ensure consistent 8px grid alignment - Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
110 lines
3.4 KiB
TypeScript
110 lines
3.4 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-kodo-content-dim 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-4 bg-kodo-steel/10 rounded-full text-kodo-steel">
|
|
<Shield className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-white text-lg">
|
|
Request Data Archive
|
|
</h3>
|
|
<p className="text-kodo-content-dim 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-4">
|
|
{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-kodo-content-dim" />
|
|
<div>
|
|
<div className="text-white font-bold text-sm">
|
|
{item.type}
|
|
</div>
|
|
<div className="text-xs text-kodo-content-dim 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-kodo-content-dim bg-kodo-graphite px-4 py-1 rounded">
|
|
Expired
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
{showModal && (
|
|
<DataExportModal
|
|
onClose={() => setShowModal(false)}
|
|
onRequest={() => {}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|