Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: add support for files and math for messages (#5)

Browse Source
This commit is contained in:
Divlo
2022-01-07 21:21:38 +01:00
committed by GitHub
parent fdc2a2d1de
commit 5c03a9b944
57 changed files with 3403 additions and 2992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/design/SocialMediaButton/SocialMediaButton.test.tsx
View File

@ -17,7 +17,7 @@ describe('<SocialMediaButton />', () => {
const { findByTestId } = render(
<SocialMediaButton socialMedia={socialMedia} />
)
const button = await findByTestId('button')
const button = await findByTestId('social-media-button')
expect(button).toHaveStyle('color: #000')
})
})

82
components/design/SocialMediaButton/SocialMediaButton.tsx
View File

@ -8,19 +8,41 @@ type SocialMediaColors = {
[key in SocialMedia]: string
}
export interface SocialMediaButtonProps
extends React.ComponentPropsWithRef<'button'> {
socialMedia: SocialMedia
}
const socialMediaColors: SocialMediaColors = {
Discord: '#404EED',
GitHub: '#24292E',
Google: '#FCFCFC'
}
const className =
'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'
interface SocialMediaChildrenProps {
socialMedia: SocialMedia
}
const SocialMediaChildren: React.FC<SocialMediaChildrenProps> = (props) => {
const { socialMedia } = props
return (
<>
<Image
width={20}
height={20}
src={`/images/svg/web/${socialMedia}.svg`}
alt={socialMedia}
/>
<span className='ml-2'>{socialMedia}</span>
</>
)
}
export interface SocialMediaButtonProps
extends React.ComponentPropsWithRef<'button'>,
SocialMediaChildrenProps {}
export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
const { socialMedia, className, ...rest } = props
const { socialMedia, className: givenClassName, ...rest } = props
const socialMediaColor = useMemo(() => {
return socialMediaColors[socialMedia]
@ -29,20 +51,11 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
return (
<>
<button
data-testid='button'
data-testid='social-media-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
)}
className={classNames(className, 'button', givenClassName)}
>
<Image
width={20}
height={20}
src={`/images/svg/web/${socialMedia}.svg`}
alt={socialMedia}
/>
<span className='ml-2'>{socialMedia}</span>
<SocialMediaChildren socialMedia={socialMedia} />
</button>
<style jsx>
@ -60,3 +73,36 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
</>
)
}
export interface SocialMediaLinkProps
extends React.ComponentPropsWithRef<'a'>,
SocialMediaChildrenProps {}
export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
const { socialMedia, className: givenClassName, ...rest } = props
const socialMediaColor = useMemo(() => {
return socialMediaColors[socialMedia]
}, [socialMedia])
return (
<>
<a {...rest} className={classNames(className, 'link', givenClassName)}>
<SocialMediaChildren socialMedia={socialMedia} />
</a>
<style jsx>
{`
.link {
background: ${socialMediaColor};
color: ${socialMedia === 'Google' ? '#000' : '#fff'};
border: ${socialMedia === 'Google' ? '1px solid #000' : 'none'};
}
.link:focus {
box-shadow: 0 0 0 2px #27b05e;
}
`}
</style>
</>
)
}