juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create social media button (#15)

Browse source 
Co-authored-by: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Co-authored-by: hoolek77 <szymon.kin@gmail.com>
This commit is contained in:
Ewelina 2022-10-20 09:59:17 +02:00 committed by GitHub
parent b069f6df52
commit 368a6fa26c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/atoms/icon-button.astro Normal file
View file

@ -0,0 +1,40 @@
---
import Icon from './icon';
type IconButtonSize = 'small' | 'large';
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
icon: string;
name: string;
size: IconButtonSize;
}
const sizeMap: Record<IconButtonSize, string> = {
small: 'w-7 h-7',
large: 'w-9 h-9',
};
const { icon, name, size, ...props } = Astro.props;
---
<a
{...props}
class:list={[
'flex',
'items-center',
'justify-center',
'rounded',
'text-gray-400',
'bg-gray-100',
'active:translate-y-px',
'focus:outline-none',
'focus:ring-2',
sizeMap[size],
props.class,
]}
tabindex="-1"
>
<button class:list={['flex', 'items-center', 'justify-center', 'w-full', 'h-full']}>
<Icon client:load name={icon} size={16} />
</button>
</a>

10
src/pages/playground/icon-button.astro Normal file
View file

@ -0,0 +1,10 @@
---
import IconButton from '@/atoms/icon-button.astro';
---
<div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
<IconButton icon="fa6-brands:facebook-f" name="Facebook" size="small" href="https://facebook.com/" target="_blank" />
<IconButton icon="fa6-brands:github" name="GitHub" size="small" href="https://github.com/" target="_blank" />
<IconButton icon="fa6-brands:linkedin-in" name="LinkedIn" size="large" href="https://linkedin.com/" target="_blank" />
<IconButton icon="fa6-brands:twitter" name="Twitter" size="large" href="https://twitter.com/" target="_blank" />
</div>