import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import useInterval from '../../hooks/useInterval'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { const [progress, setProgress] = React.useState(0); useInterval(() => { setProgress((v) => (v === 100 ? 0 : v + 1)); }, 1 * 100); return (
40%
`} css={` .container { /* Colors */ background-color: rgba(0, 0, 0, 0.1); /* Rounded border */ border-radius: 9999px; } .container__progress { /* Center the content */ align-items: center; display: flex; justify-content: center; /* Colors */ background-color: #357edd; color: #fff; /* Rounded border */ border-radius: 9999px; } `} >
{progress}%
); }; export default Details;