Visual edit in Lovable

src/components/settings/DataExportTab.tsx

@@ -8,30 +8,23 @@ import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { Download, BarChart3, Upload, FileText, History } from 'lucide-react';
-
 export function DataExportTab() {
-  const { user, profile } = useAuth();
-  const { toast } = useToast();
+  const {
+    user,
+    profile
+  } = useAuth();
+  const {
+    toast
+  } = useToast();
   const [exportLoading, setExportLoading] = useState(false);
   const [exportProgress, setExportProgress] = useState(0);
-
   const handleDataExport = async () => {
     if (!user) return;
-    
     setExportLoading(true);
     setExportProgress(0);
-    
     try {
       // Simulate export progress
-      const steps = [
-        'Collecting profile data...',
-        'Gathering reviews...',
-        'Collecting ride credits...',
-        'Gathering top lists...',
-        'Packaging data...',
-        'Preparing download...'
-      ];
-      
+      const steps = ['Collecting profile data...', 'Gathering reviews...', 'Collecting ride credits...', 'Gathering top lists...', 'Packaging data...', 'Preparing download...'];
       for (let i = 0; i < steps.length; i++) {
         await new Promise(resolve => setTimeout(resolve, 500));
         setExportProgress((i + 1) / steps.length * 100);
@@ -47,11 +40,9 @@ export function DataExportTab() {
         export_date: new Date().toISOString(),
         data_types: ['profile', 'reviews', 'ride_credits', 'top_lists']
       };
-
       const blob = new Blob([JSON.stringify(exportData, null, 2)], {
         type: 'application/json'
       });
-      
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -60,7 +51,6 @@ export function DataExportTab() {
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
-
       toast({
         title: 'Export complete',
         description: 'Your data has been exported and downloaded successfully.'
@@ -76,16 +66,13 @@ export function DataExportTab() {
       setExportProgress(0);
     }
   };
-
   const handleImportData = () => {
     toast({
       title: 'Coming soon',
-      description: 'Data import functionality will be available in a future update.',
+      description: 'Data import functionality will be available in a future update.'
     });
   };
-
-  return (
-    <div className="space-y-8">
+  return <div className="space-y-8">
       {/* Personal Statistics */}
       <div className="space-y-4">
         <div className="flex items-center gap-2">
@@ -159,21 +146,15 @@ export function DataExportTab() {
               <Badge variant="secondary">Account Activity</Badge>
             </div>
             
-            {exportLoading && (
-              <div className="space-y-2">
+            {exportLoading && <div className="space-y-2">
                 <div className="flex justify-between text-sm">
                   <span>Exporting data...</span>
                   <span>{Math.round(exportProgress)}%</span>
                 </div>
                 <Progress value={exportProgress} />
-              </div>
-            )}
+              </div>}
             
-            <Button 
-              onClick={handleDataExport} 
-              disabled={exportLoading}
-              className="w-fit"
-            >
+            <Button onClick={handleDataExport} disabled={exportLoading} className="w-fit">
               <Download className="w-4 h-4 mr-2" />
               {exportLoading ? 'Exporting...' : 'Export My Data'}
             </Button>
@@ -186,65 +167,12 @@ export function DataExportTab() {
         </Card>
       </div>
 
-      <Separator />
+      
 
       {/* Data Import */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Upload className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Import Data</h3>
-        </div>
       
-        <Card>
-          <CardHeader>
-            <CardTitle>Import From Other Sources</CardTitle>
-            <CardDescription>
-              Import your ride credits and reviews from other coaster tracking platforms.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid gap-3">
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div>
-                  <p className="font-medium">Coaster Count</p>
-                  <p className="text-sm text-muted-foreground">
-                    Import your ride credits from coaster-count.com
-                  </p>
-                </div>
-                <Button variant="outline" size="sm" onClick={handleImportData}>
-                  Import
-                </Button>
-              </div>
 
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div>
-                  <p className="font-medium">Captain Coaster</p>
-                  <p className="text-sm text-muted-foreground">
-                    Import your coaster credits from captaincoaster.com
-                  </p>
-                </div>
-                <Button variant="outline" size="sm" onClick={handleImportData}>
-                  Import
-                </Button>
-              </div>
       
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div>
-                  <p className="font-medium">CSV File</p>
-                  <p className="text-sm text-muted-foreground">
-                    Upload a CSV file with your ride credits
-                  </p>
-                </div>
-                <Button variant="outline" size="sm" onClick={handleImportData}>
-                  Upload
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Separator />
 
       {/* Account Activity */}
       <div className="space-y-4">
@@ -285,6 +213,5 @@ export function DataExportTab() {
           </CardContent>
         </Card>
       </div>
-    </div>
-  );
+    </div>;
 }