@apify/ui-library 1.92.0 → 1.92.1-featimprovetooltip-7e1224.32

package/src/components/shortcut.tsx

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import { Text } from './text/index.js';
+
+interface ShortcutProps {
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    children: React.ReactNode;
+    /* If true, always use dark mode colors */
+    dark?: boolean;
+}
+
+const adaptiveColors = css`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border: 1px solid ${theme.color.neutral.border};
+    color: ${theme.color.neutral.textSubtle};
+`;
+
+const darkColors = css`
+    background-color: ${theme.colorPalette.dark.neutral800};
+    border: 1px solid ${theme.colorPalette.dark.neutral700};
+    color: ${theme.colorPalette.dark.neutral400};
+`;
+
+const StyledShortcut = styled(Text)<{ $dark?: boolean }>`
+    min-width: 10px; /* 20 - paddings - borders */
+    height: 14px; /* 20 - paddings - borders */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${theme.radius.radius4};
+    padding: ${theme.space.space2} ${theme.space.space4};
+    ${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
+`;
+
+export const Shortcut = ({
+    as,
+    className,
+    children,
+    dark = false,
+}: ShortcutProps) => {
+    return (
+        <StyledShortcut
+            forwardedAs={as}
+            className={className}
+            $dark={dark}
+            type='code'
+            size='small'
+            weight='medium'>
+            {children}
+        </StyledShortcut>
+    );
+};