import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Circle from '../../placeholders/Circle'; import Line from '../../placeholders/Line'; const Details: React.FC<{}> = () => { return (

...

... `} css={` .wizard { display: flex; } .wizard__step { /* Make all steps have the same width */ flex: 1; } .wizard__dot { /* Center the content */ align-items: center; display: flex; justify-content: center; } .wizard__connector { flex: 1; height: 1px; background-color: rgba(0, 0, 0, 0.3); } .wizard__step:first-child .wizard__connector, .wizard__step:last-child .wizard__connector { background-color: transparent; } .wizard__number { /* Center the content */ align-items: center; display: flex; justify-content: center; /* Rounded border */ background-color: rgba(0, 0, 0, 0.3); border-radius: 9999px; height: 32px; width: 32px; /* OPTIONAL: Spacing between it and connectors */ margin-left: 4px; margin-right: 4px; } `} >

); }; export default Details;