feat(social-icons): adds bluesky and fixes responsive styling of footer

jakeherp · Aug 19, 2023 · 468406f · 468406f · vercel · Aug 19, 2023
1 parent 8996fd9
commit 468406f
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 31 deletions.
diff --git a/src/components/atoms/Icons/IconBsky.tsx b/src/components/atoms/Icons/IconBsky.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+interface SVGRProps {
+	title?: string;
+	titleId?: string;
+}
+export const IconBsky = ({
+	title,
+	titleId,
+	...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 448 512"
+		width="1em"
+		height="1em"
+		focusable="false"
+		aria-hidden="true"
+		aria-labelledby={titleId}
+		{...props}
+	>
+		{title ? <title id={titleId}>{title}</title> : null}
+		<path
+			fill="currentColor"
+			d="M0 96c0-35.3 28.7-64 64-64h320c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"
+		/>
+	</svg>
+);
diff --git a/src/components/atoms/Icons/IconThreads.tsx b/src/components/atoms/Icons/IconThreads.tsx
@@ -22,8 +22,8 @@ export const IconThreads = ({
 	>
 		{title ? <title id={titleId}>{title}</title> : null}
 		<path
-			d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735a99.978 99.978 0 0 1 5.79-.169c6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z"
 			fill="currentColor"
+			d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735a99.978 99.978 0 0 1 5.79-.169c6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z"
 		/>
 	</svg>
 );
diff --git a/src/components/atoms/Icons/IconX.tsx b/src/components/atoms/Icons/IconX.tsx
@@ -22,8 +22,8 @@ export const IconX = ({
 	>
 		{title ? <title id={titleId}>{title}</title> : null}
 		<path
-			d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"
 			fill="currentColor"
+			d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"
 		/>
 	</svg>
 );
diff --git a/src/components/atoms/Icons/assets/iconBsky.svg b/src/components/atoms/Icons/assets/iconBsky.svg
diff --git a/src/components/atoms/Icons/index.ts b/src/components/atoms/Icons/index.ts
@@ -1,3 +1,4 @@
+export * from './IconBsky';
 export * from './IconClose';
 export * from './IconDownload';
 export * from './IconGithub';

diff --git a/src/components/molecules/SocialIcons/SocialIcons.tsx b/src/components/molecules/SocialIcons/SocialIcons.tsx
@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import type { ReactNode } from 'react';
 
 export interface SocialIconsProps {
@@ -6,11 +7,12 @@ export interface SocialIconsProps {
 		name: string;
 		icon: ReactNode;
 	}>;
+	className?: string;
 }
 
-const SocialIcons = ({ profiles }: SocialIconsProps) => {
+const SocialIcons = ({ profiles, className }: SocialIconsProps) => {
 	return (
-		<ul className="flex gap-6">
+		<ul className={cn('flex flex-wrap gap-6', className)}>
 			{profiles.map(({ url, name, icon }) => (
 				<li
 					className="text-2xl opacity-70 transition hover:opacity-100"

diff --git a/src/components/molecules/SocialIcons/__snapshots__/SocialIcons.test.tsx.snap b/src/components/molecules/SocialIcons/__snapshots__/SocialIcons.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SocialIcons renders correctly 1`] = `
 <div>
   <ul
-    class="flex gap-6"
+    class="flex flex-wrap gap-6"
   >
     <li
       class="text-2xl opacity-70 transition hover:opacity-100"

diff --git a/src/components/organisms/Footer/Footer.tsx b/src/components/organisms/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@components/atoms/Container';
 import {
+	IconBsky,
 	IconGithub,
 	IconInstagram,
 	IconLinkedin,
@@ -11,8 +12,10 @@ import { SocialIcons } from '@components/molecules/SocialIcons';
 const Footer = () => {
 	return (
 		<footer className="mt-8 py-8 md:mt-20">
-			<Container className="flex justify-between">
-				<span>&copy; {new Date().getFullYear()} Jacob Herper</span>
+			<Container className="flex flex-col-reverse md:flex-row gap-4 md:justify-between">
+				<span className="text-center md:text-left">
+					&copy; {new Date().getFullYear()} Jacob Herper
+				</span>
 				<SocialIcons
 					profiles={[
 						{
@@ -26,21 +29,27 @@ const Footer = () => {
 							icon: <IconLinkedin />,
 						},
 						{
-							name: 'Threads',
-							url: 'https://www.threads.net/@jakeherp',
-							icon: <IconThreads />,
+							name: 'Instagram',
+							url: 'https://www.instagram.com/jakeherp',
+							icon: <IconInstagram />,
 						},
 						{
 							name: 'X.com',
 							url: 'https://twitter.com/jakeherp',
 							icon: <IconX />,
 						},
 						{
-							name: 'Instagram',
-							url: 'https://www.instagram.com/jakeherp',
-							icon: <IconInstagram />,
+							name: 'Threads',
+							url: 'https://www.threads.net/@jakeherp',
+							icon: <IconThreads />,
+						},
+						{
+							name: 'Bluesky Social',
+							url: 'https://bsky.app/profile/jakeherp.com',
+							icon: <IconBsky />,
 						},
 					]}
+					className="justify-center md:justify-end"
 				/>
 			</Container>
 		</footer>

diff --git a/src/components/organisms/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/organisms/Footer/__snapshots__/Footer.test.tsx.snap
@@ -6,15 +6,17 @@ exports[`Footer renders correctly 1`] = `
     class="mt-8 py-8 md:mt-20"
   >
     <div
-      class="mx-auto w-full px-4 md:max-w-4xl lg:max-w-7xl flex justify-between"
+      class="mx-auto w-full px-4 md:max-w-4xl lg:max-w-7xl flex flex-col-reverse md:flex-row gap-4 md:justify-between"
     >
-      <span>
+      <span
+        class="text-center md:text-left"
+      >
         © 
         2023
          Jacob Herper
       </span>
       <ul
-        class="flex gap-6"
+        class="flex flex-wrap gap-6 justify-center md:justify-end"
       >
         <li
           class="text-2xl opacity-70 transition hover:opacity-100"
@@ -68,23 +70,33 @@ exports[`Footer renders correctly 1`] = `
           class="text-2xl opacity-70 transition hover:opacity-100"
         >
           <a
-            href="https://www.threads.net/@jakeherp"
+            href="https://www.instagram.com/jakeherp"
             rel="noopener noreferrer"
             target="_blank"
-            title="Threads"
+            title="Instagram"
           >
             <svg
               aria-hidden="true"
               focusable="false"
               height="1em"
-              viewBox="0 0 192 192"
+              viewBox="0 0 64 64"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735a99.978 99.978 0 0 1 5.79-.169c6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z"
+                d="M62.9 19.2c-.1-3.2-.7-5.5-1.4-7.6S59.7 7.8 58 6.1s-3.4-2.7-5.4-3.5c-2-.8-4.2-1.3-7.6-1.4C41.5 1 40.5 1 32 1s-9.4 0-12.8.1-5.5.7-7.6 1.4-3.8 1.9-5.5 3.6-2.8 3.4-3.5 5.5c-.8 2-1.3 4.2-1.4 7.6S1 23.5 1 32s0 9.4.1 12.8c.1 3.4.7 5.5 1.4 7.6.7 2.1 1.8 3.8 3.5 5.5s3.5 2.8 5.5 3.5c2 .7 4.2 1.3 7.6 1.4 3.4.2 4.3.2 12.8.2s9.4 0 12.8-.1 5.5-.7 7.6-1.4c2.1-.7 3.8-1.8 5.5-3.5s2.8-3.5 3.5-5.5c.7-2 1.3-4.2 1.4-7.6.1-3.2.1-4.2.1-12.7s.2-9.6.1-13zm-5.6 25.3c-.1 3-.7 4.6-1.1 5.8-.6 1.4-1.3 2.5-2.4 3.5-1.1 1.1-2.1 1.7-3.5 2.4-1.1.4-2.7 1-5.8 1.1H32.1c-8.2 0-9.3 0-12.5-.1-3-.1-4.6-.7-5.8-1.1-1.4-.6-2.5-1.3-3.5-2.4-1.1-1.1-1.7-2.1-2.4-3.5-.4-1.1-1-2.7-1.1-5.8V32c0-8.3 0-9.3.1-12.5.1-3 .7-4.6 1.1-5.8.6-1.4 1.3-2.5 2.3-3.5 1.1-1.1 2.1-1.7 3.5-2.3 1.1-.4 2.7-1 5.8-1.1 3.2-.1 4.2-.1 12.5-.1s9.3 0 12.5.1c3 .1 4.6.7 5.8 1.1 1.4.6 2.5 1.3 3.5 2.3 1.1 1.1 1.7 2.1 2.4 3.5.4 1.1 1 2.7 1.1 5.8.1 3.2.1 4.2.1 12.5s-.1 9.3-.2 12.5z"
+                fill="currentColor"
+              />
+              <path
+                d="M32 16.1c-8.9 0-15.9 7.2-15.9 15.9 0 8.9 7.2 15.9 15.9 15.9s16-7 16-15.9-7.1-15.9-16-15.9zm0 26.3c-5.8 0-10.4-4.7-10.4-10.4S26.3 21.6 32 21.6c5.8 0 10.4 4.6 10.4 10.4S37.8 42.4 32 42.4z"
                 fill="currentColor"
               />
+              <circle
+                cx="48.7"
+                cy="15.4"
+                fill="currentColor"
+                r="3.7"
+              />
             </svg>
           </a>
         </li>
@@ -116,33 +128,47 @@ exports[`Footer renders correctly 1`] = `
           class="text-2xl opacity-70 transition hover:opacity-100"
         >
           <a
-            href="https://www.instagram.com/jakeherp"
+            href="https://www.threads.net/@jakeherp"
             rel="noopener noreferrer"
             target="_blank"
-            title="Instagram"
+            title="Threads"
           >
             <svg
               aria-hidden="true"
               focusable="false"
               height="1em"
-              viewBox="0 0 64 64"
+              viewBox="0 0 192 192"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M62.9 19.2c-.1-3.2-.7-5.5-1.4-7.6S59.7 7.8 58 6.1s-3.4-2.7-5.4-3.5c-2-.8-4.2-1.3-7.6-1.4C41.5 1 40.5 1 32 1s-9.4 0-12.8.1-5.5.7-7.6 1.4-3.8 1.9-5.5 3.6-2.8 3.4-3.5 5.5c-.8 2-1.3 4.2-1.4 7.6S1 23.5 1 32s0 9.4.1 12.8c.1 3.4.7 5.5 1.4 7.6.7 2.1 1.8 3.8 3.5 5.5s3.5 2.8 5.5 3.5c2 .7 4.2 1.3 7.6 1.4 3.4.2 4.3.2 12.8.2s9.4 0 12.8-.1 5.5-.7 7.6-1.4c2.1-.7 3.8-1.8 5.5-3.5s2.8-3.5 3.5-5.5c.7-2 1.3-4.2 1.4-7.6.1-3.2.1-4.2.1-12.7s.2-9.6.1-13zm-5.6 25.3c-.1 3-.7 4.6-1.1 5.8-.6 1.4-1.3 2.5-2.4 3.5-1.1 1.1-2.1 1.7-3.5 2.4-1.1.4-2.7 1-5.8 1.1H32.1c-8.2 0-9.3 0-12.5-.1-3-.1-4.6-.7-5.8-1.1-1.4-.6-2.5-1.3-3.5-2.4-1.1-1.1-1.7-2.1-2.4-3.5-.4-1.1-1-2.7-1.1-5.8V32c0-8.3 0-9.3.1-12.5.1-3 .7-4.6 1.1-5.8.6-1.4 1.3-2.5 2.3-3.5 1.1-1.1 2.1-1.7 3.5-2.3 1.1-.4 2.7-1 5.8-1.1 3.2-.1 4.2-.1 12.5-.1s9.3 0 12.5.1c3 .1 4.6.7 5.8 1.1 1.4.6 2.5 1.3 3.5 2.3 1.1 1.1 1.7 2.1 2.4 3.5.4 1.1 1 2.7 1.1 5.8.1 3.2.1 4.2.1 12.5s-.1 9.3-.2 12.5z"
+                d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735a99.978 99.978 0 0 1 5.79-.169c6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z"
                 fill="currentColor"
               />
+            </svg>
+          </a>
+        </li>
+        <li
+          class="text-2xl opacity-70 transition hover:opacity-100"
+        >
+          <a
+            href="https://bsky.app/profile/jakeherp.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Bluesky Social"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 448 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
-                d="M32 16.1c-8.9 0-15.9 7.2-15.9 15.9 0 8.9 7.2 15.9 15.9 15.9s16-7 16-15.9-7.1-15.9-16-15.9zm0 26.3c-5.8 0-10.4-4.7-10.4-10.4S26.3 21.6 32 21.6c5.8 0 10.4 4.6 10.4 10.4S37.8 42.4 32 42.4z"
+                d="M0 96c0-35.3 28.7-64 64-64h320c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"
                 fill="currentColor"
               />
-              <circle
-                cx="48.7"
-                cy="15.4"
-                fill="currentColor"
-                r="3.7"
-              />
             </svg>
           </a>
         </li>