import * as React from 'react'; import Head from 'next/head'; import { Heading, Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { const [isFirstChecked, setFirstChecked] = React.useState(false); const toggle = () => setFirstChecked((c) => !c); return (
...
`} css={` .container { background-color: rgba(0, 0, 0, 0.1); border-radius: 9999px; display: inline-flex; padding: 4px; } .container__label { border-radius: 9999px; cursor: pointer; padding: 4px 8px; } .container__label--selected { /* For selected radio only */ background-color: #357edd; color: #fff; } .container__input { display: none; } `} >