feat: add bg to circle xp bar

package.json

@@ -109,7 +109,7 @@
     "react-markdown": "^8.0.7",
     "react-papaparse": "^4.4.0",
     "react-window": "^1.8.8",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.4",
     "remark-gfm": "^4.0.0",
     "slugify": "^1.6.5",
     "swr": "^2.2.4",

src/app/(marketing)/profile/page.tsx → src/app/(marketing)/profile/[username]/page.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import {
   Layout,
   LayoutBanner,
@@ -14,18 +12,19 @@ import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Badge } from "@/components/ui/Badge"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
-import { ChartContainer } from "@/components/ui/Chart"
 import { Progress } from "@/components/ui/Progress"
 import { Separator } from "@/components/ui/Separator"
 import { ArrowRight, CircleWavyCheck } from "@phosphor-icons/react/dist/ssr"
-import { RadialBar, RadialBarChart } from "recharts"
-import { ActivityChart } from "./_components/ActivityChart"
-import { ContributionCard } from "./_components/ContributionCard"
-import { RecentActivity } from "./_components/RecentActivity"
-
-const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
+import { ActivityChart } from "../_components/ActivityChart"
+import { CircularProgressBar } from "../_components/CircularProgressBar"
+import { ContributionCard } from "../_components/ContributionCard"
+import { RecentActivity } from "../_components/RecentActivity"
 
-const Page = () => {
+const Page = async ({
+  params: { username },
+}: {
+  params: { username: string }
+}) => {
   return (
     <Layout>
       <LayoutHero>
@@ -39,20 +38,7 @@ const Page = () => {
         <div className="mt-24">
           <div className="mb-24 flex flex-col items-center">
             <div className="relative mb-12 flex items-center justify-center">
-              <ChartContainer
-                config={{}}
-                className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
-              >
-                <RadialBarChart
-                  data={chartData}
-                  startAngle={0}
-                  endAngle={280}
-                  innerRadius={105}
-                  outerRadius={115}
-                >
-                  <RadialBar dataKey="experience" cornerRadius={10} />
-                </RadialBarChart>
-              </ChartContainer>
+              <CircularProgressBar />
               <Avatar className="size-48">
                 <AvatarFallback>#</AvatarFallback>
               </Avatar>

src/app/(marketing)/profile/_components/CircularProgressBar.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { ChartContainer } from "@/components/ui/Chart"
+import { RadialBar, RadialBarChart } from "recharts"
+
+const chartData = [{ experience: 1, fill: "hsl(var(--primary))" }]
+
+export const CircularProgressBar = () => {
+  return (
+    <ChartContainer
+      config={{}}
+      className="-scale-x-100 absolute aspect-square min-h-56 rotate-90"
+    >
+      <RadialBarChart
+        data={chartData}
+        startAngle={0}
+        endAngle={280}
+        innerRadius={105}
+        outerRadius={115}
+      >
+        <circle
+          className="stroke-muted"
+          cx={224 >> 1}
+          cy={224 >> 1}
+          r={103}
+          strokeWidth={13}
+          fill="none"
+        />
+        <RadialBar dataKey="experience" cornerRadius={10} />
+      </RadialBarChart>
+    </ChartContainer>
+  )
+}

src/app/(marketing)/profile/_components/ContributionCard.tsx

@@ -3,8 +3,7 @@ import { AvatarGroup } from "@/components/ui/AvatarGroup"
 import { Button } from "@/components/ui/Button"
 import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
-import { CaretDown } from "@phosphor-icons/react"
-import { Users } from "@phosphor-icons/react/dist/ssr"
+import { CaretDown, Users } from "@phosphor-icons/react/dist/ssr"
 
 export const ContributionCard = () => {
   return (

src/v2/components/ui/Avatar.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 import { VariantProps, cva } from "class-variance-authority"