fix category mapping that was breaking rendering (#47)

Why:
- archive button wasn't correctly typed and as such was breaking in some
situations;
How: 
- fixed contentType mapping to correct the mentioned errors;

src/app/_blocks/RelatedContent/index.tsx

@@ -16,7 +16,7 @@ export function RelatedContent({ relatedContent }) {
       >
         {relatedContent.map((contentPiece, i) => (
           <div key={i} className={styles.contentCard}>
-            <ContentCard contentType={'Blogpost'} content={contentPiece} />
+            <ContentCard contentType={'Blogposts'} content={contentPiece} />
             <br />
             <Link href={`${contentPiece.slug}`}>{contentPiece.title}</Link>
           </div>

src/app/_components/ArchiveButton/index.tsx

@@ -0,0 +1,33 @@
+import { BlogpostIcon, CaseStudiesIcon, PodcastIcon, TalksIcon } from '@/app/_icons/icons'
+
+const iconMap = {
+  blogposts: <BlogpostIcon width={'20'} />,
+  'podcast-episodes': <PodcastIcon width={'20'} />,
+  'case-studies': <CaseStudiesIcon width={'20'} />,
+  'talks-and-roundtables': <TalksIcon width={'20'} />,
+}
+
+import styles from './styles.module.css'
+
+function formatTitle(text: string) {
+  return text
+    .replace(/\band\b/g, '&')
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+interface ArchiveButtonProps {
+  collection: 'blogposts' | 'podcast-episodes' | 'case-studies' | 'talks-and-roundtables'
+  color?: string
+}
+
+export default function ArchiveButton({ collection, color }: ArchiveButtonProps) {
+  return (
+    <a href={`/${collection}`} style={{ color: color || 'var(--dark-rock-800)' }}>
+      <div className={styles.container}>
+        {iconMap[collection]} {formatTitle(collection)}
+      </div>
+    </a>
+  )
+}

src/app/_components/ArchiveButton/styles.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-top: 10px;
+}

src/app/_components/ContentCard/index.tsx

@@ -10,7 +10,7 @@ import CategoryPill from '../CategoryPill'
 
 import styles from './styles.module.css'
 
-import ArchiveButton from '../BlogPostArchiveButton'
+import ArchiveButton from '../ArchiveButton'
 import FeaturedImage from '../FeaturedImage'
 import { HeadphonesIcon, SpectaclesIcon } from '../../_icons/icons'
 import { estimateReadTime } from '../../_utilities/estimateReadTime'

src/app/_components/MiniContentCard/index.tsx

@@ -1,14 +1,14 @@
 import styles from './styles.module.css'
 
-import ArchiveButton from '@/app/_components/BlogPostArchiveButton'
+import ArchiveButton from '../ArchiveButton'
 import CategoryPill from '@/app/_components/CategoryPill'
 import { formatDateTime } from '@/app/_utilities/formatDateTime'
 
 export default function MiniContentCard({ post }) {
   const { title, categories, publishedAt } = post
   return (
     <div className={styles.miniCard}>
-      <ArchiveButton collection={'blogpost'} />
+      <ArchiveButton collection={'blogposts'} />
       <h6>{title}</h6>
       <ul>
         {categories.map(category => (

src/app/_components/PostSummary/index.tsx

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