Updated activity

src/app/chat/page.tsx

@@ -18,6 +18,7 @@ import {
   TrendingUp,
   NetworkIcon,
   MessagesSquare,
+  ExternalLink,
 } from "lucide-react";
 import Link from "next/link";
 import StartNewDM from "./StartNewDM";
@@ -25,6 +26,7 @@ import AsyncValue from "@/components/AsyncValue";
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";
 import { toast } from "sonner";
+import { Progress } from "@/components/ui/progress";
 
 export default function ChatHub() {
   const router = useRouter();
@@ -113,33 +115,26 @@ export default function ChatHub() {
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                  <NetworkIcon className="w-5 h-5" />
-                  Active Servers
+                  <TrendingUp className="w-5 h-5" />
+                  Your Activity ⋅ 150 XP
                 </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-3">
-                {activeServers.length ? (
-                  activeServers.map((srv) => (
-                    <Link
-                      href={`/server/${srv.id}`}
-                      key={srv.id}
-                      className="flex justify-between items-center hover:bg-accent hover:text-accent-foreground rounded p-2 transition"
-                    >
-                      <span className="flex gap-2">
-                        <ProfileImage
-                          name={srv.name}
-                          url={srv.icon_url || ""}
-                        />
-                        <span className="truncate my-auto">{srv.name}</span>
-                      </span>
-                      <ChevronRight />
+
+              <CardContent className="space-y-2">
+                <div>
+                  <span className="flex gap-1 items-center">
+                    <p>ORUS community</p>
+                    <Link href={"#"}>
+                      <ExternalLink className="w-4 text-muted-foreground" />
                     </Link>
-                  ))
-                ) : (
-                  <p className="text-sm text-muted-foreground">
-                    No servers joined yet.
-                  </p>
-                )}
+                  </span>
+                  <div className="flex justify-between items-center">
+                    <Progress value={(150 / 150) * 100} />
+                    <span className="text-sm text-muted-foreground w-16 flex justify-end">
+                      <p>150</p>
+                    </span>
+                  </div>
+                </div>
               </CardContent>
             </Card>
           </div>

src/components/ui/progress.tsx

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