feat: coming soon

components/design/SocialMediaButton/SocialMediaButton.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react'
+
+import { SocialMediaButton, SocialMediaButtonProps } from './SocialMediaButton'
+
+const Stories: Meta = {
+  title: 'SocialMediaButton',
+  component: SocialMediaButton
+}
+
+export default Stories
+
+const Template: Story<SocialMediaButtonProps> = (arguments_) => (
+  <SocialMediaButton {...arguments_} />
+)
+
+export const Github = Template.bind({})
+Github.args = { socialMedia: 'GitHub' }
+
+export const Discord = Template.bind({})
+Discord.args = { socialMedia: 'Discord' }
+
+export const Google = Template.bind({})
+Google.args = { socialMedia: 'Google' }

components/design/SocialMediaButton/SocialMediaButton.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+
+import { SocialMedia, SocialMediaButton } from './'
+
+describe('<SocialMediaButton />', () => {
+  it('should render the social media', async () => {
+    const socialMedia: SocialMedia = 'Discord'
+    const { findByAltText } = render(
+      <SocialMediaButton socialMedia={socialMedia} />
+    )
+    const socialMediaButton = await findByAltText(socialMedia)
+    expect(socialMediaButton).toBeInTheDocument()
+  })
+
+  it('should render with a black text color with Google social media', async () => {
+    const socialMedia: SocialMedia = 'Google'
+    const { findByTestId } = render(
+      <SocialMediaButton socialMedia={socialMedia} />
+    )
+    const button = await findByTestId('button')
+    expect(button).toHaveStyle('color: #000')
+  })
+})

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -0,0 +1,62 @@
+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>
+    </>
+  )
+}

components/design/SocialMediaButton/index.ts

@@ -0,0 +1 @@
+export * from './SocialMediaButton'