From 1ca73ecd4de663bf1435a22bf61f2d4e45b52cfc Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 15 Jul 2022 12:24:07 -0500
Subject: [PATCH] Add size prop to button

---
 web/components/button.tsx                     | 21 ++++++++++++++-----
 .../manalinks/create-links-button.tsx         |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/web/components/button.tsx b/web/components/button.tsx
index 3b59581b..d050b81e 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -1,26 +1,37 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
 
-export default function Button(props: {
+export function Button(props: {
+  children: ReactNode
   className?: string
   onClick?: () => void
-  color: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
-  children?: ReactNode
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
   type?: 'button' | 'reset' | 'submit'
 }) {
   const {
+    children,
     className,
     onClick,
-    children,
+    size = 'md',
     color = 'indigo',
     type = 'button',
   } = props
 
+  const sizeClasses = {
+    xs: 'px-2.5 py-1.5 text-sm',
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-4 py-2 text-base',
+    xl: 'px-6 py-3 text-base',
+  }[size]
+
   return (
     <button
       type={type}
       className={clsx(
-        'font-md items-center justify-center rounded-md border border-transparent px-4 py-2 shadow-sm hover:transition-colors',
+        'font-md items-center justify-center rounded-md border border-transparent shadow-sm hover:transition-colors',
+        sizeClasses,
         color === 'green' && 'btn-primary text-white',
         color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index 12ab8c87..538e794e 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -9,7 +9,7 @@ import { createManalink } from 'web/lib/firebase/manalinks'
 import { Modal } from 'web/components/layout/modal'
 import Textarea from 'react-expanding-textarea'
 import dayjs from 'dayjs'
-import Button from '../button'
+import { Button } from '../button'
 import { getManalinkUrl } from 'web/pages/links'
 import { DuplicateIcon } from '@heroicons/react/outline'