From da2850508119c8860ca6aeef88073d4be37634d0 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Thu, 25 Jul 2024 20:23:19 +0200 Subject: [PATCH] feat: add bg to circle xp bar --- package-lock.json | 15 +++++--- package.json | 2 +- .../profile/{ => [username]}/page.tsx | 34 ++++++------------- .../_components/CircularProgressBar.tsx | 33 ++++++++++++++++++ .../profile/_components/ContributionCard.tsx | 3 +- src/v2/components/ui/Avatar.tsx | 2 -- 6 files changed, 55 insertions(+), 34 deletions(-) rename src/app/(marketing)/profile/{ => [username]}/page.tsx (86%) create mode 100644 src/app/(marketing)/profile/_components/CircularProgressBar.tsx diff --git a/package-lock.json b/package-lock.json index bdacc83c18..861780d682 100644 --- a/package-lock.json +++ b/package-lock.json @@ -98,7 +98,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", @@ -28570,14 +28570,14 @@ } }, "node_modules/recharts": { - "version": "2.12.7", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz", - "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==", + "version": "2.13.0-alpha.4", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.4.tgz", + "integrity": "sha512-K9naL6F7pEcDYJE6yFQASSCQecSLPP0JagnvQ9hPtA/aHgsxsnIOjouLP5yrFZehxzfCkV5TEORr7/uNtSr7Qw==", "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", - "react-is": "^16.10.2", + "react-is": "^18.3.1", "react-smooth": "^4.0.0", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", @@ -28604,6 +28604,11 @@ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" }, + "node_modules/recharts/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", diff --git a/package.json b/package.json index e96f029f6d..3bf2997bc2 100644 --- a/package.json +++ b/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", diff --git a/src/app/(marketing)/profile/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx similarity index 86% rename from src/app/(marketing)/profile/page.tsx rename to src/app/(marketing)/profile/[username]/page.tsx index 4d9bb26cf5..e55823bde4 100644 --- a/src/app/(marketing)/profile/page.tsx +++ b/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 ( @@ -39,20 +38,7 @@ const Page = () => {
- - - - - + # diff --git a/src/app/(marketing)/profile/_components/CircularProgressBar.tsx b/src/app/(marketing)/profile/_components/CircularProgressBar.tsx new file mode 100644 index 0000000000..488a43312d --- /dev/null +++ b/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 ( + + + > 1} + cy={224 >> 1} + r={103} + strokeWidth={13} + fill="none" + /> + + + + ) +} diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx index 3314c74580..78fe3ae20e 100644 --- a/src/app/(marketing)/profile/_components/ContributionCard.tsx +++ b/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 ( diff --git a/src/v2/components/ui/Avatar.tsx b/src/v2/components/ui/Avatar.tsx index dc79ff349f..ca0c9f20f5 100644 --- a/src/v2/components/ui/Avatar.tsx +++ b/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"