This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/design/IconButton.tsx
2021-10-24 05:19:39 +02:00

66 lines
1.5 KiB
TypeScript

import { forwardRef, useMemo } from 'react'
export const icons = [
'add',
'delete',
'edit',
'emoji',
'send',
'settings',
'more',
'download'
] as const
export type Icon = typeof icons[number]
interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
icon: Icon
hasBackground?: boolean
size?: number
}
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
(props, ref) => {
const { icon, hasBackground = false, size = 60, ...rest } = props
const imageSize = useMemo(() => {
return size / 2.6
}, [size])
return (
<>
<button ref={ref} className='button' {...rest}>
<img src={`/images/svg/icons/${icon}.svg`} alt={icon} />
</button>
<style jsx>
{`
.button {
background: ${hasBackground
? 'var(--color-background-secondary)'
: 'none'};
border-radius: ${hasBackground ? '50%' : '0'};
width: ${hasBackground ? `${size}px` : '100%'};
height: ${hasBackground ? `${size}px` : '100%'};
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.button:hover {
opacity: 0.9;
}
.button > img {
width: ${imageSize}px;
height: ${imageSize}px;
display: block;
}
`}
</style>
</>
)
}
)