feat: add support for files and math for messages (#5)

components/design/Button/Button.tsx

@@ -1,18 +1,36 @@
+import { forwardRef } from 'react'
 import classNames from 'classnames'
 
+const className =
+  'py-2 px-6 font-paragraph rounded-lg bg-transparent border border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 hover:text-white dark:hover:bg-green-400 dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:bg-green-800 focus:text-white dark:focus:bg-green-400 dark:focus:text-black'
+
+export interface ButtonLinkProps extends React.ComponentPropsWithRef<'a'> {}
+
+export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  (props, reference) => {
+    const { children, className: givenClassName, ...rest } = props
+
+    return (
+      <a
+        ref={reference}
+        className={classNames(className, givenClassName)}
+        {...rest}
+      >
+        {children}
+      </a>
+    )
+  }
+)
+
+ButtonLink.displayName = 'ButtonLink'
+
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {}
 
 export const Button: React.FC<ButtonProps> = (props) => {
-  const { children, className, ...rest } = props
+  const { children, className: givenClassName, ...rest } = props
 
   return (
-    <button
-      className={classNames(
-        'py-2 px-6 font-paragraph rounded-lg bg-transparent border border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 hover:text-white dark:hover:bg-green-400 dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:bg-green-800 focus:text-white dark:focus:bg-green-400 dark:focus:text-black',
-        className
-      )}
-      {...rest}
-    >
+    <button className={classNames(className, givenClassName)} {...rest}>
       {children}
     </button>
   )