import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Triangle from '../../placeholders/Triangle'; const Details: React.FC<{}> = () => { const [value, setValue] = React.useState(0); const decrease = () => setValue(value - 1); const increase = () => setValue(value + 1); const change = (e: React.ChangeEvent) => setValue(parseInt(e.target.value, 10)); return (

`} css={` .container { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 2px; display: flex; } .container__input { border-color: transparent; margin-right: 4px; padding: 4px; width: 100px; } .container__buttons { /* Content is centered vertically */ display: flex; flex-direction: column; justify-content: center; } .container__button { border-color: transparent; /* Make buttons have the same height */ flex: 1; } `} >

); }; export default Details;