feat(web): responsive settings nav — vertical sidebar on desktop
Restructure the 6-tab settings layout: a left vertical tab rail on desktop (lg) with content beside it, and a horizontally scrollable row on mobile with labels always visible (were icon-only, ambiguous). Tab triggers are now mapped from a single TAB_ITEMS array instead of being hand-repeated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -38,6 +38,15 @@ import {
|
||||
import { useEffect, useState } from "react";
|
||||
import { ChangelogTab } from "./changelog-tab";
|
||||
|
||||
const TAB_ITEMS = [
|
||||
{ value: "profile", icon: User, labelKey: "settings.tabs.profile" },
|
||||
{ value: "security", icon: Shield, labelKey: "settings.tabs.security" },
|
||||
{ value: "connections", icon: Link2, labelKey: "settings.tabs.connections" },
|
||||
{ value: "referral", icon: Gift, labelKey: "settings.tabs.referral" },
|
||||
{ value: "account", icon: Trash2, labelKey: "settings.tabs.account" },
|
||||
{ value: "changelog", icon: CalendarDays, labelKey: "settings.tabs.changelog" },
|
||||
] as const;
|
||||
|
||||
function PasswordField({
|
||||
id,
|
||||
label,
|
||||
@@ -231,315 +240,309 @@ export function SettingsContent({
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<h2 className="text-2xl font-bold">{t("settings.title")}</h2>
|
||||
|
||||
<Tabs value={tab} onValueChange={onTabChange}>
|
||||
<TabsList className="w-full flex-wrap">
|
||||
<TabsTrigger value="profile" className="gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.profile")}</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="security" className="gap-2">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.security")}</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="connections" className="gap-2">
|
||||
<Link2 className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.connections")}</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="referral" className="gap-2">
|
||||
<Gift className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.referral")}</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="account" className="gap-2">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.account")}</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="changelog" className="gap-2">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{t("settings.tabs.changelog")}</span>
|
||||
</TabsTrigger>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onValueChange={onTabChange}
|
||||
className="lg:grid lg:grid-cols-[210px_1fr] lg:items-start lg:gap-8"
|
||||
>
|
||||
<TabsList className="-mx-1 mb-2 flex w-full justify-start gap-1 overflow-x-auto px-1 lg:mx-0 lg:mb-0 lg:h-auto lg:flex-col lg:items-stretch lg:bg-transparent lg:p-0">
|
||||
{TAB_ITEMS.map(({ value, icon: Icon, labelKey }) => (
|
||||
<TabsTrigger
|
||||
key={value}
|
||||
value={value}
|
||||
className="shrink-0 gap-2 lg:w-full lg:justify-start lg:px-3 lg:py-2"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{t(labelKey)}</span>
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{/* Profile Tab */}
|
||||
<TabsContent value="profile">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.profile.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.profile.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleUpdateProfile} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{t("settings.profile.name")}</Label>
|
||||
<Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.profile.email")}</Label>
|
||||
<Input value={user?.email || ""} disabled />
|
||||
</div>
|
||||
{user?.createdAt && (
|
||||
<div className="min-w-0">
|
||||
{/* Profile Tab */}
|
||||
<TabsContent value="profile">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.profile.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.profile.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleUpdateProfile} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.profile.memberSince")}</Label>
|
||||
<Input
|
||||
value={new Date(user.createdAt).toLocaleDateString(
|
||||
locale === "tr" ? "tr-TR" : "en-US",
|
||||
{ day: "numeric", month: "long", year: "numeric" },
|
||||
)}
|
||||
disabled
|
||||
/>
|
||||
<Label htmlFor="name">{t("settings.profile.name")}</Label>
|
||||
<Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" disabled={savingProfile}>
|
||||
{savingProfile ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.profile.email")}</Label>
|
||||
<Input value={user?.email || ""} disabled />
|
||||
</div>
|
||||
{user?.createdAt && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.profile.memberSince")}</Label>
|
||||
<Input
|
||||
value={new Date(user.createdAt).toLocaleDateString(
|
||||
locale === "tr" ? "tr-TR" : "en-US",
|
||||
{ day: "numeric", month: "long", year: "numeric" },
|
||||
)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" disabled={savingProfile}>
|
||||
{savingProfile ? t("common.saving") : t("common.save")}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Security Tab */}
|
||||
<TabsContent value="security">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.security.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.security.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4">
|
||||
<PasswordField
|
||||
id="currentPassword"
|
||||
label={t("settings.security.currentPassword")}
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<PasswordField
|
||||
id="newPassword"
|
||||
label={t("settings.security.newPassword")}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
hint={t("settings.security.passwordHint")}
|
||||
/>
|
||||
<PasswordField
|
||||
id="confirmPassword"
|
||||
label={t("settings.security.confirmPassword")}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
error={passwordMismatch ? t("auth.passwordsDoNotMatch") : undefined}
|
||||
/>
|
||||
<Button type="submit" disabled={changingPassword || passwordMismatch}>
|
||||
{changingPassword
|
||||
? t("settings.security.changing")
|
||||
: t("settings.security.changePassword")}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
{/* Security Tab */}
|
||||
<TabsContent value="security">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.security.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.security.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4">
|
||||
<PasswordField
|
||||
id="currentPassword"
|
||||
label={t("settings.security.currentPassword")}
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<PasswordField
|
||||
id="newPassword"
|
||||
label={t("settings.security.newPassword")}
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
hint={t("settings.security.passwordHint")}
|
||||
/>
|
||||
<PasswordField
|
||||
id="confirmPassword"
|
||||
label={t("settings.security.confirmPassword")}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
error={passwordMismatch ? t("auth.passwordsDoNotMatch") : undefined}
|
||||
/>
|
||||
<Button type="submit" disabled={changingPassword || passwordMismatch}>
|
||||
{changingPassword
|
||||
? t("settings.security.changing")
|
||||
: t("settings.security.changePassword")}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Connections Tab */}
|
||||
<TabsContent value="connections">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.connections.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.connections.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
|
||||
<svg className="h-5 w-5" viewBox="0 0 24 24" role="img" aria-label="Google">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
{/* Connections Tab */}
|
||||
<TabsContent value="connections">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.connections.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.connections.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
|
||||
<svg className="h-5 w-5" viewBox="0 0 24 24" role="img" aria-label="Google">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{t("settings.connections.google")}</p>
|
||||
{connectionsLoading ? (
|
||||
<Skeleton className="mt-1 h-5 w-20" />
|
||||
) : (
|
||||
<Badge variant={connections?.google ? "default" : "secondary"}>
|
||||
{connections?.google
|
||||
? t("settings.connections.linked")
|
||||
: t("settings.connections.notLinked")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{t("settings.connections.google")}</p>
|
||||
{connectionsLoading ? (
|
||||
<Skeleton className="mt-1 h-5 w-20" />
|
||||
<Skeleton className="h-8 w-24" />
|
||||
) : connections?.google ? (
|
||||
<Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
|
||||
{t("settings.connections.unlink")}
|
||||
</Button>
|
||||
) : (
|
||||
<Badge variant={connections?.google ? "default" : "secondary"}>
|
||||
{connections?.google
|
||||
? t("settings.connections.linked")
|
||||
: t("settings.connections.notLinked")}
|
||||
</Badge>
|
||||
<Button size="sm" onClick={handleLinkGoogle}>
|
||||
{t("settings.connections.link")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{connectionsLoading ? (
|
||||
<Skeleton className="h-8 w-24" />
|
||||
) : connections?.google ? (
|
||||
<Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
|
||||
{t("settings.connections.unlink")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" onClick={handleLinkGoogle}>
|
||||
{t("settings.connections.link")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Referral Tab */}
|
||||
<TabsContent value="referral">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.referral.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.referral.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{user?.referralCode ? (
|
||||
<>
|
||||
{/* Referral Code */}
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.referral.yourCode")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input value={user.referralCode} readOnly className="font-mono text-lg" />
|
||||
<Button variant="outline" size="icon" onClick={copyReferralCode}>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Referral Tab */}
|
||||
<TabsContent value="referral">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("settings.referral.title")}</CardTitle>
|
||||
<CardDescription>{t("settings.referral.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{user?.referralCode ? (
|
||||
<>
|
||||
{/* Referral Code */}
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.referral.yourCode")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input value={user.referralCode} readOnly className="font-mono text-lg" />
|
||||
<Button variant="outline" size="icon" onClick={copyReferralCode}>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share Link */}
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.referral.shareLink")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Share Link */}
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.referral.shareLink")}</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input
|
||||
value={`${window.location.origin}/register?ref=${user.referralCode}`}
|
||||
readOnly
|
||||
className="text-sm"
|
||||
/>
|
||||
<Button variant="outline" size="icon" onClick={copyShareLink}>
|
||||
<Share2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Referral Stats */}
|
||||
<div>
|
||||
<h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-lg bg-muted/50 py-4 text-center">
|
||||
{referralLoading ? (
|
||||
<Skeleton className="mx-auto h-9 w-12" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold tabular-nums">
|
||||
{referralStats?.totalReferrals ?? 0}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.referral.totalReferrals")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-muted/50 py-4 text-center">
|
||||
{referralLoading ? (
|
||||
<Skeleton className="mx-auto h-9 w-12" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold tabular-nums">
|
||||
{referralStats?.rewardDays ?? 0}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.referral.rewardDays")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">{t("settings.referral.noCode")}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Account Tab */}
|
||||
<TabsContent value="account">
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-destructive">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
{t("settings.account.title")}
|
||||
</CardTitle>
|
||||
<CardDescription>{t("settings.account.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
{t("settings.account.deleteAccount")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("settings.account.deleteConfirmTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("settings.account.deleteConfirmDescription")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.account.typeConfirm")}</Label>
|
||||
<Input
|
||||
value={`${window.location.origin}/register?ref=${user.referralCode}`}
|
||||
readOnly
|
||||
className="text-sm"
|
||||
value={deleteConfirmText}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
||||
placeholder={t("settings.account.confirmWord")}
|
||||
/>
|
||||
<Button variant="outline" size="icon" onClick={copyShareLink}>
|
||||
<Share2 className="h-4 w-4" />
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteConfirmText("");
|
||||
}}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeleteAccount}
|
||||
disabled={
|
||||
deleteConfirmText !== t("settings.account.confirmWord") || deleting
|
||||
}
|
||||
>
|
||||
{deleting
|
||||
? t("settings.account.deleting")
|
||||
: t("settings.account.deleteAccount")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Referral Stats */}
|
||||
<div>
|
||||
<h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-lg bg-muted/50 py-4 text-center">
|
||||
{referralLoading ? (
|
||||
<Skeleton className="mx-auto h-9 w-12" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold tabular-nums">
|
||||
{referralStats?.totalReferrals ?? 0}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.referral.totalReferrals")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-muted/50 py-4 text-center">
|
||||
{referralLoading ? (
|
||||
<Skeleton className="mx-auto h-9 w-12" />
|
||||
) : (
|
||||
<p className="text-3xl font-bold tabular-nums">
|
||||
{referralStats?.rewardDays ?? 0}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("settings.referral.rewardDays")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">{t("settings.referral.noCode")}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Account Tab */}
|
||||
<TabsContent value="account">
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-destructive">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
{t("settings.account.title")}
|
||||
</CardTitle>
|
||||
<CardDescription>{t("settings.account.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="destructive">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
{t("settings.account.deleteAccount")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("settings.account.deleteConfirmTitle")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("settings.account.deleteConfirmDescription")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
<Label>{t("settings.account.typeConfirm")}</Label>
|
||||
<Input
|
||||
value={deleteConfirmText}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
||||
placeholder={t("settings.account.confirmWord")}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteConfirmText("");
|
||||
}}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDeleteAccount}
|
||||
disabled={deleteConfirmText !== t("settings.account.confirmWord") || deleting}
|
||||
>
|
||||
{deleting
|
||||
? t("settings.account.deleting")
|
||||
: t("settings.account.deleteAccount")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Changelog Tab */}
|
||||
<TabsContent value="changelog">
|
||||
<ChangelogTab />
|
||||
</TabsContent>
|
||||
{/* Changelog Tab */}
|
||||
<TabsContent value="changelog">
|
||||
<ChangelogTab />
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user