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'; 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) => { const v = parseInt(e.target.value, 10); const newValue = isNaN(v) ? 0 : v; setValue(newValue); }; return (

`} css={` .stepper { display: flex; /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); /* Size */ height: 32px; width: 128px; } .stepper__button { /* Center the content */ align-items: center; display: flex; justify-content: center; /* Size */ width: 32px; } .stepper__content { flex: 1; } .stepper__input { /* Take full size of its container */ height: 100%; width: 100%; } `} >

); }; export default Details;