102 lines
4.5 KiB
TypeScript
102 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Mail, Bell, Phone, Save } from "lucide-react"
|
|
|
|
export default function Page() {
|
|
const [notifications, setNotifications] = useState({
|
|
email: true,
|
|
push: false,
|
|
sms: true,
|
|
marketing: false,
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">通知设置</h2>
|
|
<p className="text-muted-foreground">选择您希望接收的通知类型和频率</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>通知偏好</CardTitle>
|
|
<CardDescription>选择您希望接收的通知类型</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label className="flex items-center gap-2">
|
|
<Mail className="h-4 w-4" />
|
|
邮件通知
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">接收重要更新和活动通知</p>
|
|
</div>
|
|
<Switch
|
|
checked={notifications.email}
|
|
onCheckedChange={(checked) => setNotifications({ ...notifications, email: checked })}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label className="flex items-center gap-2">
|
|
<Bell className="h-4 w-4" />
|
|
推送通知
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">在浏览器中接收实时通知</p>
|
|
</div>
|
|
<Switch
|
|
checked={notifications.push}
|
|
onCheckedChange={(checked) => setNotifications({ ...notifications, push: checked })}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label className="flex items-center gap-2">
|
|
<Phone className="h-4 w-4" />
|
|
短信通知
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">接收安全相关的短信提醒</p>
|
|
</div>
|
|
<Switch
|
|
checked={notifications.sms}
|
|
onCheckedChange={(checked) => setNotifications({ ...notifications, sms: checked })}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label>营销邮件</Label>
|
|
<p className="text-sm text-muted-foreground">接收产品更新和促销信息</p>
|
|
</div>
|
|
<Switch
|
|
checked={notifications.marketing}
|
|
onCheckedChange={(checked) => setNotifications({ ...notifications, marketing: checked })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button className="gap-2">
|
|
<Save className="h-4 w-4" />
|
|
保存通知设置
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|