Enhance Indexer page with sorting functionality and size/age parsing; update News and Settings pages for improved layout and responsiveness; implement subscription tiers and donation options on Upgrade page.
This commit is contained in:
inhale-dir
+111
-105
@@ -26,9 +26,9 @@ export default function SettingsPage() {
|
||||
const manualDownloadsPercentage = (userStats.manualDownloadsToday / userStats.manualDownloadLimitDaily) * 100;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 py-8 md:py-12 space-y-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">User Settings</h1>
|
||||
<div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
|
||||
<div className="flex justify-between items-center mb-6 lg:mb-8">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold">User Settings</h1>
|
||||
<div className="space-x-2">
|
||||
<Link href="/news" passHref>
|
||||
<Button variant="ghost">News</Button>
|
||||
@@ -42,111 +42,117 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Statistics Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Your Statistics</CardTitle>
|
||||
<CardDescription>Overview of your account activity and limits.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium">Current Rank:</span>
|
||||
<span className="text-sm text-primary font-semibold">{userStats.rank}</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-medium">Daily API Usage:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{userStats.apiHitsToday.toLocaleString()} / {userStats.apiLimitDaily.toLocaleString()} hits
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={apiUsagePercentage} className="w-full" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-medium">Daily Manual Downloads:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{userStats.manualDownloadsToday.toLocaleString()} / {userStats.manualDownloadLimitDaily.toLocaleString()} files
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={manualDownloadsPercentage} className="w-full" />
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium">Total Releases Grabbed (All Time):</span>
|
||||
<span className="text-sm font-semibold">{userStats.filesDownloaded.toLocaleString()}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Link href="/upgrade" passHref className="w-full">
|
||||
<Button className="w-full">Upgrade Your Tier</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
|
||||
<div className="lg:col-span-2 space-y-8 lg:space-y-10">
|
||||
{/* User Statistics Card */}
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl lg:text-2xl">Your Statistics</CardTitle>
|
||||
<CardDescription>Overview of your account activity and limits.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium">Current Rank:</span>
|
||||
<span className="text-sm text-primary font-semibold">{userStats.rank}</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-medium">Daily API Usage:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{userStats.apiHitsToday.toLocaleString()} / {userStats.apiLimitDaily.toLocaleString()} hits
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={apiUsagePercentage} className="w-full" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-sm font-medium">Daily Manual Downloads:</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{userStats.manualDownloadsToday.toLocaleString()} / {userStats.manualDownloadLimitDaily.toLocaleString()} files
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={manualDownloadsPercentage} className="w-full" />
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium">Total Releases Grabbed (All Time):</span>
|
||||
<span className="text-sm font-semibold">{userStats.filesDownloaded.toLocaleString()}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Link href="/upgrade" passHref className="w-full">
|
||||
<Button className="w-full">Upgrade Your Tier</Button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Account Information</CardTitle>
|
||||
<CardDescription>Manage your account details.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="username" className="text-sm font-medium">
|
||||
Username
|
||||
</label>
|
||||
<Input id="username" defaultValue="CurrentUser" disabled />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="email" className="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
<Input id="email" type="email" defaultValue="user@example.com" disabled />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button disabled>Update Account (Not Implemented)</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl lg:text-2xl">Account Information</CardTitle>
|
||||
<CardDescription>Manage your account details.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="username" className="text-sm font-medium">
|
||||
Username
|
||||
</label>
|
||||
<Input id="username" defaultValue="CurrentUser" disabled />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="email" className="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
<Input id="email" type="email" defaultValue="user@example.com" disabled />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button disabled>Update Account (Not Implemented)</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>API Key</CardTitle>
|
||||
<CardDescription>
|
||||
Manage your API key for external applications.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="apiKey" className="text-sm font-medium">
|
||||
Your API Key
|
||||
</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
id="apiKey"
|
||||
defaultValue="dummy-api-key-12345abcdef"
|
||||
readOnly
|
||||
/>
|
||||
<Button variant="outline" disabled>Copy (Not Implemented)</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl lg:text-2xl">API Key</CardTitle>
|
||||
<CardDescription>
|
||||
Manage your API key for external applications.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="apiKey" className="text-sm font-medium">
|
||||
Your API Key
|
||||
</label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
id="apiKey"
|
||||
defaultValue="dummy-api-key-12345abcdef"
|
||||
readOnly
|
||||
/>
|
||||
<Button variant="outline" disabled>Copy (Not Implemented)</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-destructive">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">Danger Zone</CardTitle>
|
||||
<CardDescription>
|
||||
Permanent actions that cannot be undone.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="destructive" disabled>
|
||||
Delete Account (Not Implemented)
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="lg:col-span-1 space-y-8 lg:space-y-10">
|
||||
<Card className="border-destructive shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl lg:text-2xl text-destructive">Danger Zone</CardTitle>
|
||||
<CardDescription>
|
||||
Permanent actions that cannot be undone.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button variant="destructive" disabled>
|
||||
Delete Account (Not Implemented)
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user