import { Shortcuts } from "@vitality-ds/components";

Use Shortcuts to support the user to understand any relevant keyboard or other device shortcuts to perform actions. The component can take any string value, but care should be taken when deciding on which keyboard shortcuts are used in your app.

<Stack>
  <Shortcuts keys={["⌘", "K"]} />
  <Shortcuts keys={["⌘", "⇧", "M"]} />
  <Shortcuts keys={["^", "L"]} />
</Stack>

When displaying shortcuts in a more graphical way, there is an option of a more stylized variant.

<Stack>
  <Shortcuts variant="stylized" keys={["⌘", "K"]} />
  <Shortcuts variant="stylized" keys={["⌘", "⇧", "M"]} />
  <Shortcuts variant="stylized" keys={["^", "L"]} />
</Stack>

Work in Progress: We are developing this feature. In the meantime, you can develop your own logic to determine the user's platform and simply pass the value in to this component.