import * as React from 'react'; import Head from 'next/head'; import Link from 'next/link'; import { Heading, Spacer } from '@1milligram/design'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; interface ItemProps { action: string; keys: string; } const Item: React.FC = ({ action, keys }) => { return (
{action}
{keys}
); }; const Details: React.FC<{}> = () => { return (
We use the native kbd tag to display the keyboard shortcut.
... `} css={` .container { /* Background and color */ background-color: rgba(0, 0, 0, 0.1); border-radius: 4px; color: rgba(0, 0, 0, 0.7); /* Bottom shadow */ box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; /* Spacing */ padding: 8px; } `} >
⌘ + C
Use cases
We can use this pattern with the{' '} property list {' '} pattern to create shortkey preferences as following:
); }; export default Details;