fix archive button rendering

- also fixes podcast and blogpost mobile styling

src/app/(pages)/blogposts/[slug]/styles.module.css

@@ -25,10 +25,14 @@
 }
 
 .sharingAndCategories {
+  display: flex;
+  flex-direction: column;
   grid-row-start: 1;
+  padding: 20px;
+  gap: 20px;
 }
 
-@media (min-width: 1080px) {
+@media (min-width: 1024px) {
 
   .headContainer {
     width: calc(100% - 40px);

src/app/_blocks/EpisodeContent/styles.module.css

@@ -48,6 +48,7 @@
     flex-direction: column;
     grid-row: 2 / 2;
     padding: 16px;
+    row-gap: 20px;
   }
 
   .sharingAndCategories hr {

src/app/_blocks/HubContentGrid/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 
 import ContentCard from "../../_components/ContentCard";
 import { ContentTypeArrays } from "../../_interfaces/ContentTypeArrays";
@@ -16,10 +16,6 @@ const colorMap = {
   TalksAndRoundtables: "var(--sub-purple-300)",
 };
 
-interface HubContentGridProps {
-  articles: ContentTypeArrays;
-}
-
 export default function HubContentGrid({ content }) {
   // todo: fix rendering when there is no content
 
@@ -32,17 +28,15 @@ export default function HubContentGrid({ content }) {
 
   const dynamicColor = {
     "--dynamic-color": colorMap[activeButton],
-  };
+  } as React.CSSProperties
 
   const filteredContent = filterContent({ articles: content, filter: activeButton });
 
 
   return (
     <div>
-      {/*{<pre>{JSON.stringify(filteredContent, null, 2)}</pre>}*/}
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
-      {/*   TODO: fix dynamic color*/}
-      <div className={styles.contentGridContainer}>
+      <div className={styles.contentGridContainer} style={dynamicColor}>
         <div className={styles.contentGrid}>
           {filteredContent.map((article, i) => (
             <div className={styles.contentCard}>

src/app/_blocks/HubContentGrid/styles.module.css

@@ -36,9 +36,11 @@
   }
 
   .contentGridContainer {
+    position: relative;
     border-top: 1px solid var(--dark-rock-800);
     border-radius: 25px;
     margin: 0 auto;
+    border-color: var(--dynamic-color);
   }
 
 }

src/app/_components/ArchiveButton/index.tsx

@@ -2,7 +2,7 @@ import { BlogpostIcon, CaseStudiesIcon, PodcastIcon, TalksIcon } from '@/app/_ic
 
 const iconMap = {
   blogposts: <BlogpostIcon width={'20'} color={"currentColor"}/>,
-  'podcast-episodes': <PodcastIcon width={'20'} color={"currentColor"}/>,
+  'podcasts': <PodcastIcon width={'20'} color={"currentColor"}/>,
   'case-studies': <CaseStudiesIcon width={'20'} color={"currentColor"}/>,
   'talks-and-roundtables': <TalksIcon width={'20'} color={"currentColor"}/>,
 }
@@ -18,7 +18,7 @@ function formatTitle(text: string) {
 }
 
 interface ArchiveButtonProps {
-  collection: 'blogposts' | 'podcast-episodes' | 'case-studies' | 'talks-and-roundtables'
+  collection: 'blogposts' | 'podcasts' | 'case-studies' | 'talks-and-roundtables'
   color?: string
 }
 

src/app/_components/ContentCard/index.tsx

@@ -26,33 +26,32 @@ interface ContentSummaryProps {
 
 const archiveMap = {
   Blogposts: "blogposts",
-  PodcastEpisodes: "podcast-episodes",
+  Podcasts: "podcasts",
   CaseStudies: "case-studies",
   TalksAndRoundtables: "talks-and-roundtables",
 };
 
 export default function ContentCard({ contentType, content, rounded }: ContentSummaryProps) {
   const { slug, title, summary, featuredImage, categories, publishedAt, authors } = content;
   const borderStyle = {
-    '--dynamic-border': rounded ? '45px' : ''
-  }
+    "--dynamic-border": rounded ? "45px" : "",
+  };
 
   // todo: convert to a collection item property
-  const readTime = estimateReadTime("herpaderpa");
-
+  const readTime = contentType === 'Blogposts' ? estimateReadTime(content.content_html) : ''
 
   return (
     // @ts-ignore
     <div className={styles.contentCard} style={borderStyle}>
       <div className={styles.contentMetaContainer}>
         <Link href={`/${toKebabCase(contentType)}/${slug}`}>
-        {featuredImage && (
-          <div className={styles.imageContainer}>
-            {/*  @ts-ignore */}
-            <FeaturedImage src={featuredImage.url} />
-          </div>
-        )}
-        {/*<ArchiveButton collection={archiveMap[contentType]} />*/}
+          {featuredImage && (
+            <div className={styles.imageContainer}>
+              {/*  @ts-ignore */}
+              <FeaturedImage src={featuredImage.url} />
+            </div>
+          )}
+          <ArchiveButton collection={archiveMap[contentType]} />
 
           <h6>{title} </h6>
 
@@ -65,11 +64,12 @@ export default function ContentCard({ contentType, content, rounded }: ContentSu
 
         <div className={styles.dateAndDuration}>
           {formatDateTime(publishedAt)}
-          {contentType === "PodcastEpisodes" ? (
+          {contentType === "Podcasts" && (
             <span>
                 <HeadphonesIcon width={"20"} /> 1h
               </span>
-          ) : (
+          )}
+          {contentType === "Blogposts" && (
             <span>
                 <SpectaclesIcon width={"20"} />
               {readTime}

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

@@ -1,5 +1,4 @@
 .gridContainer {
-  padding-bottom: 40px;
   display: grid;
   color: var(--dark-rock-800);
   grid-template-rows: 1fr 1fr;

src/app/_utilities/estimateReadTime.ts

@@ -1,4 +1,4 @@
-export function estimateReadTime(text: string): string {
+export function estimateReadTime(text: string | null): string {
   const WPM = 250
   const wordCount = text.split(/\s+/).length
   const readTimeMinutes = Math.ceil(wordCount / WPM)