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/SocialMediaButton/SocialMediaButton.tsx

63 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-10-24 05:48:06 +02:00
import { useMemo } from 'react'
import Image from 'next/image'
import classNames from 'classnames'
export type SocialMedia = 'Discord' | 'GitHub' | 'Google'
type SocialMediaColors = {
[key in SocialMedia]: string
}
export interface SocialMediaButtonProps
extends React.ComponentPropsWithRef<'button'> {
socialMedia: SocialMedia
}
const socialMediaColors: SocialMediaColors = {
Discord: '#404EED',
GitHub: '#24292E',
Google: '#FCFCFC'
}
export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
const { socialMedia, className, ...rest } = props
const socialMediaColor = useMemo(() => {
return socialMediaColors[socialMedia]
}, [socialMedia])
return (
<>
<button
data-testid='button'
{...rest}
className={classNames(
`button py-2 px-6 inline-flex outline-none items-center font-paragraph rounded-lg cursor-pointer transition duration-300 ease-in-out hover:opacity-80 focus:outline-none`,
className
)}
>
<Image
width={20}
height={20}
src={`/images/svg/web/${socialMedia}.svg`}
alt={socialMedia}
/>
<span className='ml-2'>{socialMedia}</span>
</button>
<style jsx>
{`
.button {
background: ${socialMediaColor};
color: ${socialMedia === 'Google' ? '#000' : '#fff'};
border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
}
.button:focus {
box-shadow: 0 0 0 2px #27b05e;
}
`}
</style>
</>
)
}