import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; interface RadialProgressProps { percentages: number; } const RadialProgress: React.FC = ({ percentages }) => { return (
{percentages}%
= 50 ? 'rect(auto, auto, auto, auto)' : 'rect(0px, 128px, 128px, 64px)', height: '100%', left: 0, position: 'absolute', top: 0, width: '100%', }} >
= 50 ? 180 : 0}deg)`, width: '100%', }} />
); }; const Details: React.FC<{}> = () => { return (
...
`} css={` .container { position: relative; } .container__percentages { /* Center the content */ align-items: center; display: flex; justify-content: center; /* Rounded border */ border: 12px solid rgba(0, 0, 0, 0.3); border-radius: 9999px; /* Size */ height: 128px; width: 128px; } .container__curve { /* Position */ left: 0; position: absolute; top: 0; /* Take full size */ height: 100%; width: 100%; /* If percentages is less than 50 */ clip: rect(0px, 128px, 128px, 64px); /* If percentages is greater than or equals to 50 */ clip: rect(auto, auto, auto, auto); } .container__half { /* Take full size */ height: 100%; position: absolute; width: 100%; /* Background color of curve. The border width should be the same as the area showing the percentages */ border: 12px solid rgb(0, 68, 158); border-radius: 9999px; } .container__half--first { /* Position */ clip: rect(0px, 64px, 128px, 0px); transform: rotate(162deg); /* Number of percentages * 360 / 100 */ } .container__half--second { /* Position */ clip: rect(0px, 64px, 128px, 0px); /* If percentages is less than 50 */ transform: rotate(0deg); /* If percentages is greater than or equals to 50 */ transform: rotate(180deg); } `} >
); }; export default Details;