126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Alert, AlertDescription } from "@/components/ui/alert"
|
|
import { Loader2, Settings, Palette } from "lucide-react"
|
|
|
|
interface SettingsDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
|
|
const [settings, setSettings] = useState({
|
|
language: "zh-TW",
|
|
theme: "system",
|
|
})
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [success, setSuccess] = useState("")
|
|
|
|
const handleSave = async () => {
|
|
setIsLoading(true)
|
|
setSuccess("")
|
|
|
|
// Simulate API call
|
|
await new Promise((resolve) => setTimeout(resolve, 1500))
|
|
|
|
setSuccess("設定已儲存成功!")
|
|
setIsLoading(false)
|
|
setTimeout(() => setSuccess(""), 3000)
|
|
}
|
|
|
|
const updateSetting = (key: string, value: any) => {
|
|
setSettings((prev) => ({
|
|
...prev,
|
|
[key]: value,
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold flex items-center gap-2">
|
|
<Settings className="w-6 h-6" />
|
|
設定
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6">
|
|
{success && (
|
|
<Alert className="border-green-200 bg-green-50">
|
|
<AlertDescription className="text-green-800">{success}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Interface Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Palette className="w-5 h-5" />
|
|
介面設定
|
|
</CardTitle>
|
|
<CardDescription>自訂您的使用者介面偏好設定</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="language">語言</Label>
|
|
<Select value={settings.language} onValueChange={(value) => updateSetting("language", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="zh-TW">繁體中文</SelectItem>
|
|
<SelectItem value="zh-CN">简体中文</SelectItem>
|
|
<SelectItem value="en">English</SelectItem>
|
|
<SelectItem value="ja">日本語</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="theme">主題</Label>
|
|
<Select value={settings.theme} onValueChange={(value) => updateSetting("theme", value)}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="light">淺色主題</SelectItem>
|
|
<SelectItem value="dark">深色主題</SelectItem>
|
|
<SelectItem value="system">跟隨系統</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Save Button */}
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={isLoading}
|
|
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
儲存中...
|
|
</>
|
|
) : (
|
|
"儲存設定"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|