diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/Widgets/SocialMedia | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (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.scss | 59 | ||||
| -rw-r--r-- | src/components/Widgets/SocialMedia/SocialMedia.tsx | 113 | 
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; | 
