open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add size prop to button

Browse Source
This commit is contained in:
James Grugett 2022-07-15 12:24:07 -05:00
parent ec682788e0
commit 1ca73ecd4d
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/button.tsx
View File

@ -1,26 +1,37 @@
import { ReactNode } from 'react' import { ReactNode } from 'react'
import clsx from 'clsx' import clsx from 'clsx'
export default function Button(props: { export function Button(props: {
children: ReactNode
className?: string className?: string
onClick?: () => void onClick?: () => void
color: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
children?: ReactNode color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
type?: 'button' | 'reset' | 'submit' type?: 'button' | 'reset' | 'submit'
}) { }) {
const { const {
children,
className, className,
onClick, onClick,
children, size = 'md',
color = 'indigo', color = 'indigo',
type = 'button', type = 'button',
} = props } = 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 ( return (
<button <button
type={type} type={type}
className={clsx( 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 === 'green' && 'btn-primary text-white',
color === 'red' && 'bg-red-400 text-white hover:bg-red-500', color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500', color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',

2
web/components/manalinks/create-links-button.tsx
View File

@ -9,7 +9,7 @@ import { createManalink } from 'web/lib/firebase/manalinks'
import { Modal } from 'web/components/layout/modal' import { Modal } from 'web/components/layout/modal'
import Textarea from 'react-expanding-textarea' import Textarea from 'react-expanding-textarea'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import Button from '../button' import { Button } from '../button'
import { getManalinkUrl } from 'web/pages/links' import { getManalinkUrl } from 'web/pages/links'
import { DuplicateIcon } from '@heroicons/react/outline' import { DuplicateIcon } from '@heroicons/react/outline'