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

34
components/design/Button/Button.tsx
View File

@ -1,18 +1,36 @@
import { forwardRef } from 'react'
import classNames from 'classnames'
const className =
'py-2 px-6 font-paragraph rounded-lg bg-transparent border border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 hover:text-white dark:hover:bg-green-400 dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:bg-green-800 focus:text-white dark:focus:bg-green-400 dark:focus:text-black'
export interface ButtonLinkProps extends React.ComponentPropsWithRef<'a'> {}
export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
(props, reference) => {
const { children, className: givenClassName, ...rest } = props
return (
<a
ref={reference}
className={classNames(className, givenClassName)}
{...rest}
>
{children}
</a>
)
}
)
ButtonLink.displayName = 'ButtonLink'
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {}
export const Button: React.FC<ButtonProps> = (props) => {
const { children, className, ...rest } = props
const { children, className: givenClassName, ...rest } = props
return (
<button
className={classNames(
'py-2 px-6 font-paragraph rounded-lg bg-transparent border border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 hover:text-white dark:hover:bg-green-400 dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:bg-green-800 focus:text-white dark:focus:bg-green-400 dark:focus:text-black',
className
)}
{...rest}
>
<button className={classNames(className, givenClassName)} {...rest}>
{children}
</button>
)

2
components/design/FormState/FormState.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames'
import useTranslation from 'next-translate/useTranslation'
import { FetchState as FormStateType } from 'hooks/useFetchState'
import { FetchState as FormStateType } from '../../../hooks/useFetchState'
import { Loader } from '../Loader'
export interface FormStateProps {

1
components/design/Input/Input.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import { FormState } from '../FormState'
export interface InputProps extends React.ComponentPropsWithRef<'input'> {

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>
</>
)
}