/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; import Head from 'next/head'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { DetailsLayout } from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; interface RadioProps { value: string; } const Details: React.FC<{}> = () => { const [selectedValue, setSelectedValue] = React.useState('1'); const Radio: React.FC = ({ value, children }) => { const click = () => setSelectedValue(value); return (

{children} ); }; return (

...

`} css={` .label { /* Center the content horizontally */ align-items: center; display: inline-flex; /* Cursor */ cursor: pointer; } .label__input { /* Hide it */ display: none; } .label__circle { /* Rounded border */ border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 9999px; /* Spacing */ margin-right: 8px; padding: 4px; } .label__radio { /* Rounded border */ border-radius: 9999px; height: 16px; width: 16px; /* For not selected radio */ background-color: transparent; } .label__radio--selected { /* For selected radio */ background-color: #00449E; } `} >

); }; export default Details;