inhale/indexer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Radix UI Progress component and user statistics display to settings page

Browse Source
This commit is contained in:
inhale-dir
2025-05-24 20:50:18 +02:00
parent 91b4b5802f
commit 1eb9ca54f9
4 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/settings/page.tsx
+55
View File
@@ -8,9 +8,23 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import Link from "next/link";
export default function SettingsPage() {
// Dummy user statistics data
const userStats = {
rank: "Gold Tier",
apiHitsToday: 750,
apiLimitDaily: 1000,
manualDownloadsToday: 5,
manualDownloadLimitDaily: 20,
filesDownloaded: 123,
};
const apiUsagePercentage = (userStats.apiHitsToday / userStats.apiLimitDaily) * 100;
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">
@@ -28,6 +42,47 @@ 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>
<Card>
<CardHeader>
<CardTitle>Account Information</CardTitle>