Add button component

Author: yatarkan

site/src/components/Button/index.tsx

@@ -0,0 +1,72 @@
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import React, { CSSProperties } from 'react';
+
+import styles from './styles.module.css';
+
+type ButtonProps = {
+  size?: 'sm' | 'lg' | 'small' | 'medium' | 'large' | null;
+  outline?: boolean;
+  variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
+  block?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  link: string;
+  label: string;
+  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+export default function Button({
+  size = null,
+  outline = false,
+  variant = 'primary',
+  block = false,
+  disabled = false,
+  className,
+  style,
+  link,
+  label,
+  Icon,
+}: ButtonProps) {
+  const sizeMap = {
+    sm: 'sm',
+    small: 'sm',
+    lg: 'lg',
+    large: 'lg',
+    medium: null,
+  };
+  const buttonSize = size ? sizeMap[size] : '';
+  const sizeClass = buttonSize ? `button--${buttonSize}` : '';
+  const outlineClass = outline ? 'button--outline' : '';
+  const variantClass = variant ? `button--${variant}` : '';
+  const blockClass = block ? 'button--block' : '';
+  const disabledClass = disabled ? 'disabled' : '';
+  const destination = disabled ? null : link;
+
+  return (
+    <Link to={destination}>
+      <button
+        className={clsx(
+          'button',
+          sizeClass,
+          outlineClass,
+          variantClass,
+          blockClass,
+          disabledClass,
+          className
+        )}
+        style={style}
+        role="button"
+        aria-disabled={disabled}
+      >
+        {Icon && (
+          <span className={styles.buttonIcon}>
+            <Icon />
+          </span>
+        )}
+        {label}
+      </button>
+    </Link>
+  );
+}

site/src/components/Button/styles.module.css

@@ -0,0 +1,19 @@
+:global(.button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  --button-icon-size: calc(1.5rem * var(--ifm-button-size-multiplier));
+
+  .buttonIcon {
+    display: inline-flex;
+    height: var(--button-icon-size);
+    width: var(--button-icon-size);
+    margin-right: 1rem;
+
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

site/src/theme/MDXComponents.tsx

@@ -1,3 +1,4 @@
+import Button from '@site/src/components/Button';
 import { LanguageTabs, TabItemCpp, TabItemPython } from '@site/src/components/LanguageTabs';
 import MDXComponents from '@theme-original/MDXComponents';
 import TabItem from '@theme/TabItem';
@@ -10,6 +11,7 @@ export default {
   Tabs,
   TabItem,
   // Custom components
+  Button,
   LanguageTabs,
   TabItemPython,
   TabItemCpp,