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

chore: remove usage of styled-jsx

Browse Source
This commit is contained in:
Divlo
2022-12-13 22:31:32 +01:00
parent e8a9ce4e69
commit 67a1699102
23 changed files with 345 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/design/SocialMediaButton/SocialMediaButton.module.css Normal file
View File

@ -0,0 +1,11 @@
.buttonGoogle {
color: #000;
border: 1px solid #000;
}
.buttonMedia {
color: #fff;
border: none;
}
.button:focus {
box-shadow: 0 0 0 2px #27b05e;
}

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

@ -3,6 +3,7 @@ import Image from 'next/image'
import classNames from 'clsx'
import type { ProviderOAuth } from '../../../models/OAuth'
import styles from './SocialMediaButton.module.css'
export type SocialMedia = ProviderOAuth
@ -52,27 +53,21 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
}, [socialMedia])
return (
<>
<button
{...rest}
className={classNames(className, 'button', givenClassName)}
>
<SocialMediaChildren socialMedia={socialMedia} />
</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>
</>
<button
{...rest}
style={{ background: socialMediaColor }}
className={classNames(
className,
styles.button,
{
[styles.buttonGoogle]: socialMedia === 'Google',
[styles.buttonMedia]: socialMedia !== 'Google'
},
givenClassName
)}
>
<SocialMediaChildren socialMedia={socialMedia} />
</button>
)
}
@ -88,23 +83,20 @@ export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
}, [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>
</>
<a
{...rest}
style={{ background: socialMediaColor }}
className={classNames(
className,
styles.button,
{
[styles.buttonGoogle]: socialMedia === 'Google',
[styles.buttonMedia]: socialMedia !== 'Google'
},
givenClassName
)}
>
<SocialMediaChildren socialMedia={socialMedia} />
</a>
)
}