refactor: separate Episode Stats

src/components/Article/Article.Stats.tsx

@@ -3,14 +3,14 @@ import styled from '@emotion/styled'
 
 const ArticleStats = ({
   date,
-  duration,
+  readingLength,
 }: {
   date: Date | null
-  duration: number
+  readingLength: number
 }) => (
   <Row>
     <Typography variant="body3" genericFontFamily="sans-serif">
-      {duration ? duration : ' '} minutes
+      {readingLength} minutes read
     </Typography>
     <Typography variant="body3">•</Typography>
     <Typography variant="body3" genericFontFamily="sans-serif">

src/components/Episode/Episode.Stats.tsx

@@ -0,0 +1,35 @@
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+
+const EpisodeStats = ({
+  date,
+  duration,
+}: {
+  date: Date | null
+  duration: number
+}) => (
+  <Row>
+    <Typography variant="body3" genericFontFamily="sans-serif">
+      {duration ? duration : ' '} minutes
+    </Typography>
+    <Typography variant="body3">•</Typography>
+    <Typography variant="body3" genericFontFamily="sans-serif">
+      {date &&
+        date.toLocaleString('en-GB', {
+          day: 'numeric',
+          month: 'long', // TODO: Should be uppercase
+          year: 'numeric',
+        })}
+    </Typography>
+  </Row>
+)
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+`
+
+export default EpisodeStats

src/components/Episode/Header/Episode.Header.tsx

@@ -3,12 +3,12 @@ import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { LPE } from '../../../types/lpe.types'
 import ReactPlayer from 'react-player'
-import { default as Stats } from '@/components/Article/Article.Stats'
 import { LogosCircleIcon } from '@/components/Icons/LogosCircleIcon'
 import { useHookstate } from '@hookstate/core'
 import { playerState } from '@/components/GlobalAudioPlayer/globalAudioPlayer.state'
 import EpisodeChannels from './Episode.Channels'
 import { useEffect, useRef } from 'react'
+import EpisodeStats from '../Episode.Stats'
 
 export type EpisodeHeaderProps = LPE.Podcast.Document & {
   url: string
@@ -85,7 +85,7 @@ const EpisodeHeader = ({
           }
         />
       </PlayerContainer>
-      <Stats date={date} duration={duration} />
+      <EpisodeStats date={date} duration={duration} />
       <EpisodeTitle variant="h1" genericFontFamily="serif" component="h1">
         {title}
       </EpisodeTitle>