From 879de9b79c2cb6162ed981ca34f4148166894deb Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 18 Aug 2023 22:44:53 +0900
Subject: [PATCH] refactor: separate Episode Stats

---
 src/components/Article/Article.Stats.tsx      |  6 ++--
 src/components/Episode/Episode.Stats.tsx      | 35 +++++++++++++++++++
 .../Episode/Header/Episode.Header.tsx         |  4 +--
 3 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Episode/Episode.Stats.tsx

diff --git a/src/components/Article/Article.Stats.tsx b/src/components/Article/Article.Stats.tsx
index 53d49e7..6192459 100644
--- a/src/components/Article/Article.Stats.tsx
+++ b/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">
diff --git a/src/components/Episode/Episode.Stats.tsx b/src/components/Episode/Episode.Stats.tsx
new file mode 100644
index 0000000..9e577cd
--- /dev/null
+++ b/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
diff --git a/src/components/Episode/Header/Episode.Header.tsx b/src/components/Episode/Header/Episode.Header.tsx
index 45e031c..38e67e3 100644
--- a/src/components/Episode/Header/Episode.Header.tsx
+++ b/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>