feat: flesh in social bar (#755)

Signed-off-by: hxtree <[email protected]>
hxtree · Dec 14, 2023 · d07b37e · d07b37e
1 parent 8d015df
commit d07b37e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 4 deletions.
diff --git a/services/design-system/src/components/PageFooter/PageFooter.tsx b/services/design-system/src/components/PageFooter/PageFooter.tsx
@@ -1,3 +1,4 @@
+import SocialMediaBar from '../SocialMediaBar/SocialMediaBar';
 import { Typography } from '../Typography/Typography';
 import './style.module.scss';
 
@@ -18,10 +19,11 @@ export const PageFooter = (props: PageFooterProps) => {
 
   return (
     <footer className='page-footer'>
-      {links && <ul>
+      <SocialMediaBar/>
+      {links && <Typography variant="body"><ul>
         {links.map((link: PageFooterLink) => (
           <li><a href={link.url}>{link.label}</a></li>
-        ))}</ul>
+        ))}</ul></Typography>
       }
       <hr/>
       <Typography variant="body">

diff --git a/services/design-system/src/components/PageFooter/style.module.scss b/services/design-system/src/components/PageFooter/style.module.scss
@@ -1,7 +1,32 @@
+@import '../../styles/utils/color-pallette';
 .page-footer {
-  background-color: #000;
-  color: #fff;
+  background-color: $color-primary;
+  color: $color-white;
   margin: 0;
   margin-top: 3rem;
   padding: 3rem;
+  a {
+    opacity: 0.9;
+    text-decoration: none;
+    color: $color-white;
+    &:hover {
+      color: $color-white;
+      opacity: 1;
+      font-weight: bold;
+    }
+  }
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    li {
+      width: 33%;
+      margin: 0;
+      display: inline-block;
+      a {
+        padding: 0.2rem;
+        display: block;
+      }
+    }
+  }
 }
diff --git a/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx b/services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx
@@ -0,0 +1,33 @@
+import { Typography } from '../Typography/Typography';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faYoutube, faXTwitter } from '@fortawesome/free-brands-svg-icons';
+import './style.module.scss';
+
+export type SocialMediaBarLink = {
+  label: string;
+  url: string;
+}
+
+export type SocialMediaBarProps = {
+  links?: SocialMediaBarLink[];
+};
+
+export const SocialMediaBar = (props: SocialMediaBarProps) => {
+  const { links } = props;
+
+  return (
+    <div className='social-media-bar'>
+      <FontAwesomeIcon icon={faGithub} size="2xl"/>
+      <FontAwesomeIcon icon={faYoutube} size="2xl"/>
+      <FontAwesomeIcon icon={faXTwitter} size="2xl"/>
+
+      {links && <Typography variant="body"><ul>
+        {links.map((link: SocialMediaBarLink) => (
+          <li><a href={link.url}>{link.label}</a></li>
+        ))}</ul></Typography>
+      }
+    </div>
+  );
+};
+
+export default SocialMediaBar;
diff --git a/services/design-system/src/components/SocialMediaBar/style.module.scss b/services/design-system/src/components/SocialMediaBar/style.module.scss
@@ -0,0 +1,33 @@
+@import '../../styles/utils/color-pallette';
+
+.social-media-bar {
+  background-color: $color-gray;
+  color: $color-white;
+  margin: 0;
+  margin-top: 3rem;
+  padding: 3rem;
+  a {
+    opacity: 0.9;
+    text-decoration: none;
+    color: $color-white;
+    &:hover {
+      color: $color-white;
+      opacity: 1;
+      font-weight: bold;
+    }
+  }
+  ul {
+    display: block;
+    margin: 0;
+    padding: 0;
+    li {
+      width: 33%;
+      margin: 0;
+      display: inline-block;
+      a {
+        padding: 0.2rem;
+        display: block;
+      }
+    }
+  }
+}