import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints'; import { Button } from '@roleypoly/design-system/atoms/button'; import * as React from 'react'; import { MdRestore } from 'react-icons/md'; import styled, { css } from 'styled-components'; type Props = { onSubmit: () => void; onReset: () => void; }; const Buttons = styled.div` display: flex; flex-wrap: wrap; `; const Left = styled.div` flex: 0; ${onSmallScreen` flex: 1 1 100%; order: 2; `} `; const Right = styled.div<{ inline?: boolean }>` flex: 1; ${(props) => props.inline && css` padding-left: 0.2em; `} `; export const ResetSubmit = (props: Props) => { return ( ); }; export const InlineResetSubmit = (props: Props) => { return ( ); };