"use client"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Checkbox } from "@/components/ui/checkbox"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { Badge } from "@/components/ui/badge"; import { User, Shield, Bell, CreditCard, Settings, Upload, Plus, Menu, X } from "lucide-react"; import { cn } from "@/lib/utils"; const sidebarItems = [ { id: "profile", label: "Profile", icon: User }, { id: "security", label: "Security", icon: Shield }, { id: "notifications", label: "Notification", icon: Bell }, { id: "billing", label: "Billing", icon: CreditCard }, { id: "integrations", label: "Integration", icon: Settings } ]; const integrations = [ { name: "Google Drive", description: "Upload your files to Google Drive", icon: "🟢", enabled: true }, { name: "Slack", description: "Post to a Slack channel", icon: "🟣", enabled: true }, { name: "Notion", description: "Retrieve notion note to your project", icon: "⚫", enabled: false }, { name: "Jira", description: "Create Jira issues", icon: "🔵", enabled: false }, { name: "Zendesk", description: "Exchange data with Zendesk", icon: "🟢", enabled: false }, { name: "Dropbox", description: "Exchange data with Dropbox", icon: "🔵", enabled: false }, { name: "Github", description: "Exchange files with a GitHub repository", icon: "⚫", enabled: false }, { name: "Gitlab", description: "Exchange files with a Gitlab repository", icon: "🟠", enabled: false } ]; const transactions = [ { id: "#36223", product: "Mock premium pack", status: "Pending", date: "12/10/2021", amount: "$39.90" }, { id: "#34283", product: "Business board basic subscription", status: "Paid", date: "11/13/2021", amount: "$59.90" }, { id: "#32234", product: "Business board basic subscription", status: "Paid", date: "10/13/2021", amount: "$59.90" }, { id: "#31354", product: "Business board basic subscription", status: "Paid", date: "09/13/2021", amount: "$59.90" } ]; export function SettingsPage() { const [activeSection, setActiveSection] = useState("profile"); const [sidebarOpen, setSidebarOpen] = useState(false); const renderContent = () => { switch (activeSection) { case "profile": return ; case "security": return ; case "notifications": return ; case "billing": return ; case "integrations": return ; default: return ; } }; return (

{/* Mobile menu button */}

{/* Sidebar */}

{sidebarItems.map((item) => { const Icon = item.icon; return ( ); })}

{/* Main content */}

{renderContent()}

{/* Mobile overlay */} {sidebarOpen && (

setSidebarOpen(false)} /> )}

); } function ProfileSection() { return (

Personal information

{/* Personal info form */}

First name

User name

Phone number

Address information

Country

Address

City

Postal Code

); } function SecuritySection() { return (

Password

Remember, your password is your digital key to your account. Keep it safe, keep it secure!

Current password

New password

Confirm new password

2-Step verification Your account holds great value to hackers. Enable two-step verification to safeguard your account!

Google Authenticator

Using Google Authenticator app generates time-sensitive codes for secure logins.

Activated

Okta Verify

Receive push notifications from Okta Verify app on your phone for quick login approval.

E Mail verification

Unique codes sent to email for confirming logins.

); } function NotificationsSection() { return (

Notification

Enable desktop notification

Decide whether you want to be notified of new message & updates

Enable unread notification badge

Display a red indicator on of the notification icon when you have unread message

Enable unread notification badge

All new messages

Broadcast notifications to the channel for each new message

Mentions only

Only alert me in the channel if someone mentions me in a message

Nothing

Don't notify me anything

Email notification

Substance can send you email notification for any new direct message

News & updates

New about product and features update

Tips & tutorials

Tips & trick in order to increase your performance efficiency

Offer & promotions

Promotion about product price & latest discount

Follow up reminder

Receive notification all the reminder that have been made

); } function BillingSection() { return (

Billing

⚡

Business board basic

Active

Billing monthly | Next payment on 02/09/2025 for{" "} $59.90

Payment method

VISA

Carolyn Perkins •••• 0392 Primary

Expired Dec 2025

Carolyn Perkins •••• 8461

Expired Jun 2025

Transaction history

REFERENCE

PRODUCT

STATUS

DATE

AMOUNT

{transactions.map((transaction) => (

{transaction.id}

{transaction.product}

{transaction.status}

{transaction.date}

{transaction.amount}

))}

); } function IntegrationsSection() { return (

Integration

Supercharge your workflow using these integration

{integrations.map((integration) => (

{integration.icon}

{integration.name}

{integration.description}

))}

); }