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<{}> = () => { return ( `} css={` .button { /* Center the content */ align-items: center; display: flex; justify-content: center; /* Spacing */ padding: 8px; } .button__arrow { /* Transparent background */ background-color: transparent; /* Size */ height: 12px; width: 12px; } .button__arrow--up { /* Edges */ border-left: 1px solid rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(0, 0, 0, 0.3); transform: translateY(25%) rotate(45deg); } .button__arrow--right { /* Edges */ border-right: 1px solid rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(0, 0, 0, 0.3); transform: translateX(-25%) rotate(45deg); } .button__arrow--down { /* Edges */ border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3); transform: translateY(-25%) rotate(45deg); } .button__arrow--left { /* Edges */ border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(0, 0, 0, 0.3); transform: translateX(25%) rotate(45deg); } `} >

); }; export default Details;