aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Widgets/SocialMedia
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-29 12:13:34 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-29 18:30:05 +0200
commit7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch)
treebfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Widgets/SocialMedia
parent5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff)
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch.
Diffstat (limited to 'src/components/Widgets/SocialMedia')
-rw-r--r--src/components/Widgets/SocialMedia/SocialMedia.module.scss59
-rw-r--r--src/components/Widgets/SocialMedia/SocialMedia.tsx113
2 files changed, 0 insertions, 172 deletions
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
deleted file mode 100644
index 2ef34bf..0000000
--- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.list {
- @extend %flex-list;
-
- flex: 0 0 100%;
- gap: var(--spacing-xs);
- align-items: center;
- padding: var(--spacing-2xs) 0 0 var(--spacing-2xs);
-}
-
-.link {
- display: block;
- width: 3em;
- height: 3em;
- background: none;
- box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow),
- fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
- var(--color-shadow),
- fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
- var(--color-shadow),
- 0 0 0 0 var(--color-shadow);
- transition: all 0.3s linear 0s;
-
- &:hover,
- &:focus {
- box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow),
- fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
- var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
- var(--color-shadow-light),
- fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
- var(--color-shadow);
- transform: scale(1.15);
- }
-
- &:focus {
- outline: var(--color-primary) dashed fun.convert-px(2);
- }
-
- &:active {
- box-shadow: 0 0 0 0 var(--color-shadow);
- outline: none;
- transform: scale(0.9);
- }
-}
-
-:global {
- [data-theme="dark"] {
- :local {
- .icon {
- filter: brightness(0.85) contrast(1.1);
- }
- }
- }
-}
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx
deleted file mode 100644
index decf657..0000000
--- a/src/components/Widgets/SocialMedia/SocialMedia.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
-import TwitterIcon from '@assets/images/social-media/twitter.svg';
-import styles from './SocialMedia.module.scss';
-import { ExpandableWidget } from '@components/WidgetParts';
-import { useIntl } from 'react-intl';
-
-const SocialMedia = ({
- title,
- github = false,
- gitlab = false,
- linkedin = false,
- twitter = false,
-}: {
- title: string;
- github?: boolean;
- gitlab?: boolean;
- linkedin?: boolean;
- twitter?: boolean;
-}) => {
- const intl = useIntl();
-
- const websites = [
- {
- id: 'github',
- name: intl.formatMessage({
- defaultMessage: 'Github',
- description: 'SocialMedia: Github',
- id: 'SWjj4l',
- }),
- url: 'https://github.com/ArmandPhilippot',
- },
- {
- id: 'gitlab',
- name: intl.formatMessage({
- defaultMessage: 'Gitlab',
- description: 'SocialMedia: Gitlab',
- id: 'obmlFh',
- }),
- url: 'https://gitlab.com/ArmandPhilippot',
- },
- {
- id: 'linkedin',
- name: intl.formatMessage({
- defaultMessage: 'LinkedIn',
- description: 'SocialMedia: LinkedIn',
- id: 'VbcHZ4',
- }),
- url: 'https://www.linkedin.com/in/armandphilippot',
- },
- {
- id: 'twitter',
- name: intl.formatMessage({
- defaultMessage: 'Twitter',
- description: 'SocialMedia: Twitter',
- id: 'IPs/Ck',
- }),
- url: 'https://twitter.com/ArmandPhilippot',
- },
- ];
-
- const getIcon = (id: string) => {
- switch (id) {
- case 'github':
- return <GithubIcon className={styles.icon} />;
- case 'gitlab':
- return <GitlabIcon className={styles.icon} />;
- case 'linkedin':
- return <LinkedInIcon className={styles.icon} />;
- case 'twitter':
- return <TwitterIcon className={styles.icon} />;
- default:
- break;
- }
- };
-
- const shouldDisplayLink = (id: string) => {
- switch (id) {
- case 'github':
- return github;
- case 'gitlab':
- return gitlab;
- case 'linkedin':
- return linkedin;
- case 'twitter':
- return twitter;
- default:
- break;
- }
- };
-
- const items = websites.map((website) => {
- return shouldDisplayLink(website.id) ? (
- <li key={website.id}>
- <a href={website.url} className={styles.link}>
- {getIcon(website.id)}
- <span className="screen-reader-text">{website.name}</span>
- </a>
- </li>
- ) : (
- ''
- );
- });
-
- return (
- <ExpandableWidget title={title} expand={true}>
- <ul className={styles.list}>{items}</ul>
- </ExpandableWidget>
- );
-};
-
-export default SocialMedia;