generated from fahricansecer/boilerplate-fe
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import type { SystemStyleObject } from '@chakra-ui/react';
|
|
import { AbsoluteCenter, ProgressCircle as ChakraProgressCircle } from '@chakra-ui/react';
|
|
import * as React from 'react';
|
|
|
|
interface ProgressCircleRingProps extends ChakraProgressCircle.CircleProps {
|
|
trackColor?: SystemStyleObject['stroke'];
|
|
cap?: SystemStyleObject['strokeLinecap'];
|
|
}
|
|
|
|
export const ProgressCircleRing = React.forwardRef<SVGSVGElement, ProgressCircleRingProps>(
|
|
function ProgressCircleRing(props, ref) {
|
|
const { trackColor, cap, color, ...rest } = props;
|
|
return (
|
|
<ChakraProgressCircle.Circle {...rest} ref={ref}>
|
|
<ChakraProgressCircle.Track stroke={trackColor} />
|
|
<ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
|
|
</ChakraProgressCircle.Circle>
|
|
);
|
|
},
|
|
);
|
|
|
|
export const ProgressCircleValueText = React.forwardRef<HTMLDivElement, ChakraProgressCircle.ValueTextProps>(
|
|
function ProgressCircleValueText(props, ref) {
|
|
return (
|
|
<AbsoluteCenter>
|
|
<ChakraProgressCircle.ValueText {...props} ref={ref} />
|
|
</AbsoluteCenter>
|
|
);
|
|
},
|
|
);
|
|
|
|
export const ProgressCircleRoot = ChakraProgressCircle.Root;
|