add social icon component

package.json

@@ -21,6 +21,10 @@
     "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@payloadcms/bundler-webpack": "^1.0.7",
     "@payloadcms/db-postgres": "^0.8.5",
     "@payloadcms/plugin-cloud": "^3.0.1",

src/app/_components/Header/Social/index.module.scss

@@ -0,0 +1,25 @@
+@use '../../../_css/queries.scss' as *;
+
+.socialIcons {
+  display: flex;
+  gap: calc(var(--base) / 4) var(--base);
+  flex-wrap: wrap;
+  opacity: 1;
+  transition: opacity 100ms linear;
+  visibility: visible;
+  padding-right: 20px;
+}
+
+.socialIcon {
+  color: rgba(255, 255, 255, 1);
+  font-size: 2em;
+
+  :hover {
+    color: rgba(255, 255, 255, 0.8)
+  }
+}
+
+.hide {
+  opacity: 0;
+  visibility: hidden;
+}

src/app/_components/Header/Social/index.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import React from 'react'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+import { Header as HeaderType } from '../../../../payload/payload-types'
+import { CMSLink } from '../../Link'
+
+import classes from './index.module.scss'
+
+export const HeaderSocial: React.FC<{ header: HeaderType }> = ({ header }) => {
+  const socialItems = header?.socialIcons || []
+
+  const fetchSocialIcon = (key: string) => {
+    if (key === 'github') return faGithub
+    throw Error('Unknown icon: ' + key)
+  }
+
+  return (
+    <div className={classes.socialIcons}>
+      {socialItems.map(({ link, faIcon }, i) => {
+        return (
+          <CMSLink
+            className={classes.socialIcon}
+            key={i}
+            {...link}
+            faIcon={fetchSocialIcon(faIcon)}
+          />
+        )
+      })}
+    </div>
+  )
+}

src/app/_components/Header/index.module.scss

@@ -4,6 +4,10 @@
   padding: var(--base) 0;
 }
 
+.navLinks {
+  display: flex;
+}
+
 .wrap {
   display: flex;
   justify-content: space-between;

src/app/_components/Header/index.tsx

@@ -9,6 +9,7 @@ import { Header } from '../../../payload/payload-types'
 import { fetchHeader } from '../../_api/fetchGlobals'
 import { Gutter } from '../Gutter'
 import { HeaderNav } from './Nav'
+import { HeaderSocial } from './Social'
 
 import classes from './index.module.scss'
 
@@ -40,7 +41,10 @@ export async function Header() {
               src="https://res.cloudinary.com/ddddyraui/image/upload/cl-logo_e5nuxu.png"
             />
           </Link>
-          <HeaderNav header={header} />
+          <div className={classes.navLinks}>
+            <HeaderSocial header={header} />
+            <HeaderNav header={header} />
+          </div>
         </Gutter>
       </header>
     </>

src/app/_components/Link/index.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { IconDefinition } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
 import { Page } from '../../../payload/payload-types'
@@ -17,6 +19,7 @@ type CMSLinkType = {
   children?: React.ReactNode
   className?: string
   invert?: ButtonProps['invert']
+  faIcon?: IconDefinition
 }
 
 export const CMSLink: React.FC<CMSLinkType> = ({
@@ -29,6 +32,7 @@ export const CMSLink: React.FC<CMSLinkType> = ({
   children,
   className,
   invert,
+  faIcon,
 }) => {
   const href =
     type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
@@ -43,7 +47,11 @@ export const CMSLink: React.FC<CMSLinkType> = ({
     const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
 
     if (href || url) {
-      return (
+      return faIcon ? (
+        <a {...newTabProps} className={className} href={href}>
+          <FontAwesomeIcon icon={faIcon} />
+        </a>
+      ) : (
         <Link {...newTabProps} href={href || url} className={className}>
           {label && label}
           {children && children}
@@ -52,7 +60,11 @@ export const CMSLink: React.FC<CMSLinkType> = ({
     }
   }
 
-  return (
+  return faIcon ? (
+    <a className={className} href={href}>
+      <FontAwesomeIcon icon={faIcon} />
+    </a>
+  ) : (
     <Button
       className={className}
       newTab={newTab}

src/app/_css/common.scss

@@ -1,2 +1,2 @@
 @forward './queries.scss';
-@forward './type.scss';
+@forward './type.scss';

src/app/_graphql/globals.ts

@@ -5,6 +5,10 @@ export const HEADER = `
     navItems {
       link ${LINK_FIELDS({ disableAppearance: true })}
 		}
+		socialIcons {
+		  faIcon,
+		  link ${LINK_FIELDS({ disableAppearance: true })}
+		}
   }
 `
 

src/payload/globals/Header.ts

@@ -18,5 +18,31 @@ export const Header: GlobalConfig = {
         }),
       ],
     },
+    {
+      name: 'socialIcons',
+      type: 'array',
+      maxRows: 6,
+      fields: [
+        {
+          name: 'faIcon',
+          type: 'select',
+          hasMany: false,
+          required: false,
+          admin: {
+            isClearable: true,
+            isSortable: true,
+          },
+          options: [
+            {
+              label: 'Github',
+              value: 'github',
+            },
+          ],
+        },
+        link({
+          appearances: false,
+        }),
+      ],
+    },
   ],
 }

src/payload/payload-types.ts

@@ -921,6 +921,22 @@ export interface Header {
         id?: string | null;
       }[]
     | null;
+  socialIcons?:
+    | {
+        faIcon?: 'github' | null;
+        link: {
+          type?: ('reference' | 'custom') | null;
+          newTab?: boolean | null;
+          reference?: {
+            relationTo: 'pages';
+            value: number | Page;
+          } | null;
+          url?: string | null;
+          label: string;
+        };
+        id?: string | null;
+      }[]
+    | null;
   updatedAt?: string | null;
   createdAt?: string | null;
 }