"use client"; import { Download, Loader2, Lock, Save, Trash2 } from "lucide-react"; import { useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldLabel, } from "@/components/ui/field"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; export interface PrivacyData { profileVisibility: "public" | "private"; showEmail: boolean; showActivity: boolean; analyticsOptOut: boolean; marketingEmails: boolean; thirdPartyIntegrations: boolean; dataRetentionDays?: number; twoFactorEnabled: boolean; loginNotifications: boolean; } export interface SettingsPrivacyProps { privacy?: PrivacyData; onSave?: (data: PrivacyData) => Promise; onExportData?: () => Promise; onDeleteAccount?: () => Promise; onEnable2FA?: () => Promise; className?: string; } const defaultPrivacy: PrivacyData = { profileVisibility: "public", showEmail: false, showActivity: true, analyticsOptOut: false, marketingEmails: true, thirdPartyIntegrations: true, dataRetentionDays: 365, twoFactorEnabled: false, loginNotifications: true, }; export default function SettingsPrivacy({ privacy = defaultPrivacy, onSave, onExportData, onDeleteAccount, onEnable2FA, className, }: SettingsPrivacyProps) { const [isSaving, setIsSaving] = useState(false); const [isExporting, setIsExporting] = useState(false); const [localPrivacy, setLocalPrivacy] = useState(privacy); const handleSave = async () => { setIsSaving(true); try { await onSave?.(localPrivacy); } finally { setIsSaving(false); } }; const handleExportData = async () => { setIsExporting(true); try { await onExportData?.(); } finally { setIsExporting(false); } }; const updatePrivacy = ( key: K, value: PrivacyData[K] ) => { setLocalPrivacy((prev) => ({ ...prev, [key]: value })); }; return (

Privacy Settings Control your privacy and data sharing preferences

{/* Profile Visibility */}

Profile Visibility

Profile Visibility Control who can view your profile

Show Email Display your email address on your profile

updatePrivacy("showEmail", checked) } />

Show Activity Display your recent activity on your profile

updatePrivacy("showActivity", checked) } />

{/* Data Sharing */}

Data Sharing

Analytics Opt-Out Stop sharing usage analytics with us

updatePrivacy("analyticsOptOut", checked) } />

Marketing Emails Receive promotional emails and updates

updatePrivacy("marketingEmails", checked) } />

Third-Party Integrations Allow data sharing with connected third-party services

updatePrivacy("thirdPartyIntegrations", checked) } />

{/* Security */}

Security

Two-Factor Authentication Add an extra layer of security to your account

{localPrivacy.twoFactorEnabled ? ( Enabled ) : ( )}

{/* Data Management */}

Data Management

Data Retention How long to keep your activity history

Download a copy of all your data in JSON format

Delete Account Are you sure you want to delete your account? This action cannot be undone. All your data will be permanently deleted. Cancel Delete Account

Permanently delete your account and all associated data

); }

Profile Visibility

Data Sharing

Security

Data Management

Example Usage