45 lines
924 B
Text
45 lines
924 B
Text
---
|
|
import Icon from '@/atoms/icon';
|
|
import type { IconName } from '@/types/icon';
|
|
|
|
type IconButtonSize = 'small' | 'large';
|
|
|
|
export interface Props {
|
|
icon: IconName;
|
|
target?: astroHTML.JSX.AnchorHTMLAttributes['target'];
|
|
href: string;
|
|
size: IconButtonSize;
|
|
'aria-label'?: astroHTML.JSX.AnchorHTMLAttributes['aria-label'];
|
|
}
|
|
|
|
const sizeMap: Record<IconButtonSize, string> = {
|
|
small: 'w-7 h-7',
|
|
large: 'w-9 h-9',
|
|
};
|
|
|
|
const { icon, href, target, size, ...rest } = Astro.props;
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
target={target}
|
|
class:list={[
|
|
'flex',
|
|
'items-center',
|
|
'justify-center',
|
|
'rounded',
|
|
'text-gray-400',
|
|
'bg-gray-100',
|
|
'active:translate-y-px',
|
|
'focus:outline-none',
|
|
'focus:ring-2',
|
|
'focus:ring-offset-2',
|
|
'focus:ring-primary-500',
|
|
'dark:bg-gray-600',
|
|
'dark:text-gray-200',
|
|
sizeMap[size],
|
|
]}
|
|
{...rest}
|
|
>
|
|
<Icon client:load name={icon} size={16} />
|
|
</a>
|