circle-progress.tsx raw

   1  import { Progress as ProgressPrimitive } from "radix-ui";
   2  import * as React from "react";
   3  import { cn } from "src/lib/utils";
   4  
   5  function CircleProgress({
   6    className,
   7    value,
   8    ...props
   9  }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  10    return (
  11      <ProgressPrimitive.Root
  12        className={cn(
  13          `relative h-20 w-20 overflow-hidden rounded-full flex justify-center items-center`,
  14          className
  15        )}
  16        {...props}
  17        style={{
  18          background: `radial-gradient(closest-side, var(--color-background) 79%, transparent 80% 100%), conic-gradient(var(--color-primary) ${value || 0}%, var(--color-secondary) 0)`,
  19        }}
  20      >
  21        {props.children || <div className="">{`${value || 0}%`}</div>}
  22      </ProgressPrimitive.Root>
  23    );
  24  }
  25  
  26  export default CircleProgress;
  27