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

app/settings/page.tsx

@@ -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>

components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.12",
         "class-variance-authority": "^0.7.1",
@@ -1193,6 +1194,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "class-variance-authority": "^0.7.1",