fix errors

src/app/(pages)/[slug]/page.tsx

@@ -40,23 +40,23 @@ export default async function Page({ params: { slug = 'home' } }) {
   )
 }
 
-export async function generateMetadata({ params: { slug = 'home' } }): Promise<Metadata> {
-  const { isEnabled: isDraftMode } = draftMode()
-
-  let page: Page | null = null
-
-  try {
-    page = await fetchDoc<Page>({
-      collection: 'pages',
-      slug,
-      draft: isDraftMode,
-    })
-  } catch (error) {
-    // don't throw an error if the fetch fails
-    // this is so that we can render static fallback pages for the demo
-    // when deploying this template on Payload Cloud, this page needs to build before the APIs are live
-    // in production you may want to redirect to a 404  page or at least log the error somewhere
-  }
-
-  return generateMeta({ doc: page })
-}
+// export async function generateMetadata({ params: { slug = 'home' } }): Promise<Metadata> {
+//   const { isEnabled: isDraftMode } = draftMode()
+//
+//   let page: Page | null = null
+//
+//   try {
+//     page = await fetchDoc<Page>({
+//       collection: 'pages',
+//       slug,
+//       draft: isDraftMode,
+//     })
+//   } catch (error) {
+//     // don't throw an error if the fetch fails
+//     // this is so that we can render static fallback pages for the demo
+//     // when deploying this template on Payload Cloud, this page needs to build before the APIs are live
+//     // in production you may want to redirect to a 404  page or at least log the error somewhere
+//   }
+//
+//   return generateMeta({ doc: page })
+// }

src/app/_blocks/AuthorContentGrid/index.tsx

@@ -14,7 +14,7 @@ export default function AuthorContentGrid({
   content: {
     Blogposts: Blogpost[]
     PodcastEpisodes: PodcastEpisode[]
-    CasteStudies: CaseStudy[]
+    CaseStudies: CaseStudy[]
     TalksAndRoundtables: TalksAndRoundtable[]
   }
 }) {

src/app/_blocks/EpisodeContent/index.tsx

@@ -31,7 +31,7 @@ export default function EpisodeContent({ episode }: { episode: PodcastEpisode })
 
       {/* Share/Category Column */}
       <div className={styles.sharingAndCategories}>
-        <hr/>
+        <hr />
         <Share />
         <Categories categories={categories} />
         <RSSFeed className={styles.RSSFeed} />

src/app/_blocks/EpisodeHead/AudioPlayer/index.tsx

@@ -2,7 +2,7 @@
 
 const AudioPlayer: React.FC<{ src: string; type: string }> = ({ src, type }) => {
   return (
-    <div style={{width:'100%'}}>
+    <div style={{ width: '100%' }}>
       <audio controls style={{ width: '100%' }}>
         <source src={src} type={type} />
         Your browser does not support the audio element.

src/app/_blocks/EpisodeHead/index.tsx

@@ -1,37 +1,38 @@
-"use client";
-
-import BackButton from "../../_components/BackButton";
-import { formatDateTime } from "../../_utilities/formatDateTime";
-import { getAudio } from "../../_utilities/getAudio";
-import { useEpisodeDuration } from "../../_utilities/useEpisodeDuration";
-import AudioPlayer from "./AudioPlayer";
-import styles from "./styles.module.css";
-import ArchiveButton from "@/app/_components/ArchiveButton";
-import FeaturedImage from "@/app/_components/FeaturedImage";
-import { HeadphonesIcon } from "@/app/_icons/icons";
+'use client'
+
+import BackButton from '../../_components/BackButton'
+import { formatDateTime } from '../../_utilities/formatDateTime'
+import { getAudio } from '../../_utilities/getAudio'
+import { useEpisodeDuration } from '../../_utilities/useEpisodeDuration'
+import AudioPlayer from './AudioPlayer'
+import styles from './styles.module.css'
+
+import ArchiveButton from '@/app/_components/ArchiveButton'
+import FeaturedImage from '@/app/_components/FeaturedImage'
+import { HeadphonesIcon } from '@/app/_icons/icons'
 
 export default function EpisodeHead({ episode }) {
-  const { title, episodeFile, publishedAt, featuredImage } = episode;
+  const { title, episodeFile, publishedAt, featuredImage } = episode
 
   // TODO: convert into conditional logic based on ContentType
 
   // Initial undefined state
-  const { audioFileSource, audioFileType } = getAudio(episodeFile);
+  const { audioFileSource, audioFileType } = getAudio(episodeFile)
 
   return (
     <div className={styles.container}>
-      <BackButton className={styles.backButton} color={"var(--soft-white-100)"} />
+      <BackButton className={styles.backButton} color={'var(--soft-white-100)'} />
 
       <div className={styles.metadataContainer}>
         {/* First Column */}
         <div className={styles.metadata}>
-          <ArchiveButton collection={"podcast-episodes"} color={"var(--soft-white-100)"} />
+          <ArchiveButton collection={'podcast-episodes'} color={'var(--soft-white-100)'} />
           <h5>{title}</h5>
           <h6>episode.podcastName property</h6>
           <p>
             {formatDateTime(publishedAt)}
             <span>
-              <HeadphonesIcon width={"14"} height={"14"} color={"var(--soft-white-100)"} />
+              <HeadphonesIcon width={'14'} height={'14'} color={'var(--soft-white-100)'} />
               {useEpisodeDuration(audioFileSource)}
             </span>
           </p>
@@ -41,12 +42,11 @@ export default function EpisodeHead({ episode }) {
           <AudioPlayer className={styles.audioPlayer} src={audioFileSource} type={audioFileType} />
         </div>
 
-
         {/* TODO: Second Column displays EpisodeFeaturedImage if ContentType is podcast */}
         <div className={styles.featuredImageContainer}>
           <FeaturedImage className={styles.featuredImage} src={featuredImage} />
         </div>
       </div>
     </div>
-  );
+  )
 }

src/app/_components/ArchiveButton/index.tsx

@@ -1,10 +1,10 @@
 import { BlogpostIcon, CaseStudiesIcon, PodcastIcon, TalksIcon } from '@/app/_icons/icons'
 
 const iconMap = {
-  blogposts: <BlogpostIcon width={'20'} color={"currentColor"}/>,
-  'podcast-episodes': <PodcastIcon width={'20'} color={"currentColor"}/>,
-  'case-studies': <CaseStudiesIcon width={'20'} color={"currentColor"}/>,
-  'talks-and-roundtables': <TalksIcon width={'20'} color={"currentColor"}/>,
+  blogposts: <BlogpostIcon width={'20'} color={'currentColor'} />,
+  'podcast-episodes': <PodcastIcon width={'20'} color={'currentColor'} />,
+  'case-studies': <CaseStudiesIcon width={'20'} color={'currentColor'} />,
+  'talks-and-roundtables': <TalksIcon width={'20'} color={'currentColor'} />,
 }
 
 import styles from './styles.module.css'

src/app/_components/AuthorPill/index.tsx

@@ -1,13 +1,13 @@
-import styles from "./styles.module.css";
+import styles from './styles.module.css'
 
-import FeaturedImage from "@/app/_components/FeaturedImage";
-import { LinkedInIcon, TwitterIcon } from "@/app/_icons/socialIcons";
-import { getImage } from "@/app/_utilities/getImage";
-import { Socials } from "@/payload/globals/Socials";
-import { Author } from "@/payload/payload-types";
+import FeaturedImage from '@/app/_components/FeaturedImage'
+import { LinkedInIcon, TwitterIcon } from '@/app/_icons/socialIcons'
+import { getImage } from '@/app/_utilities/getImage'
+import { Socials } from '@/payload/globals/Socials'
+import { Author } from '@/payload/payload-types'
 
 export default function AuthorPill({ large = false, author }: { large: boolean; author: Author }) {
-  const { name, featuredImage, linkedIn, x } = author;
+  const { name, featuredImage, linkedIn, x } = author
 
   /* unsure if this will be useful, as all names have same length in figma
 
@@ -26,10 +26,18 @@ const dynamicVars = {
 
       {large && (
         <div className={styles.socials}>
-          {linkedIn && <a href={linkedIn}><LinkedInIcon /></a>}
-          {x && <a href={x}><TwitterIcon /></a>}
+          {linkedIn && (
+            <a href={linkedIn}>
+              <LinkedInIcon />
+            </a>
+          )}
+          {x && (
+            <a href={x}>
+              <TwitterIcon />
+            </a>
+          )}
         </div>
       )}
     </>
-  );
+  )
 }

src/app/_components/BackButton/index.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import BackArrow from '../../_icons/BackArrow'
 import styles from './styles.module.css'
 
-export default function BackButton({ className, color }) {
+export default function BackButton({ className, color } : { className?: string, color?: string }) {
   return (
     <>
       <Link className={className} href="/">

src/app/_components/ContentCard/index.tsx

@@ -1,20 +1,15 @@
-
 import Link from 'next/link'
 
 import { Blogpost, PodcastEpisode } from '../../../payload/payload-types'
+import { HeadphonesIcon, SpectaclesIcon } from '../../_icons/icons'
+import { estimateReadTime } from '../../_utilities/estimateReadTime'
 import { formatDateTime } from '../../_utilities/formatDateTime'
-
 import { toKebabCase } from '../../_utilities/toKebabCase'
+import ArchiveButton from '../ArchiveButton'
 import Authors from '../Authors'
 import CategoryPill from '../CategoryPill'
-
-import styles from './styles.module.css'
-
-import ArchiveButton from '../ArchiveButton'
 import FeaturedImage from '../FeaturedImage'
-import { HeadphonesIcon, SpectaclesIcon } from '../../_icons/icons'
-import { estimateReadTime } from '../../_utilities/estimateReadTime'
-
+import styles from './styles.module.css'
 
 interface ContentSummaryProps {
   contentType: string

src/app/_components/MiniContentCard/index.tsx

@@ -1,6 +1,6 @@
+import ArchiveButton from '../ArchiveButton'
 import styles from './styles.module.css'
 
-import ArchiveButton from '../ArchiveButton'
 import CategoryPill from '@/app/_components/CategoryPill'
 import { formatDateTime } from '@/app/_utilities/formatDateTime'
 

src/app/_components/PostSummary/index.tsx

@@ -1,8 +1,8 @@
 import { Blogpost } from '../../../payload/payload-types'
 import { estimateReadTime } from '../../_utilities/estimateReadTime'
 import { formatDateTime } from '../../_utilities/formatDateTime'
-import AuthorPill from '../AuthorPill'
 import ArchiveButton from '../ArchiveButton'
+import AuthorPill from '../AuthorPill'
 import styles from './styles.module.css'
 export default function PostSummary({ post }: { post: Blogpost }) {
   const { title, publishedAt, content, authors } = post

src/app/_icons/icons.tsx

@@ -457,7 +457,7 @@ export function PlayIcon({
         strokeWidth="2"
       />
     </svg>
-  );
+  )
 }
 
 export function HeadphonesIcon({
@@ -512,15 +512,31 @@ export function LinkIcon({
         strokeLinejoin="round"
       />
     </svg>
-  );
+  )
 }
 
-export default function CodeIcon({ x, y, width = "24", height = "24", color = "var(--dark-rock-800)" }) {
+export default function CodeIcon({
+  x,
+  y,
+  width = '24',
+  height = '24',
+  color = 'var(--dark-rock-800)',
+}) {
   return (
-    <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.1999 16.7999L2.3999 12L7.1999 7.19995M16.7999 7.19995L21.5999 12L16.7999 16.7999" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.1999 16.7999L2.3999 12L7.1999 7.19995M16.7999 7.19995L21.5999 12L16.7999 16.7999"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
-
-
-  );
+  )
 }