TypeScript: Port podcasts page

src/components/podcasts/PlayPauseButton.tsx

@@ -0,0 +1,48 @@
+import { FC, RefObject, useCallback, useState } from 'react'
+import styled from 'styled-components'
+
+export type Props = {
+  audioElementRef: RefObject<HTMLAudioElement | null>
+}
+
+const AudioButton = styled.button`
+  height: 65px;
+  border: none;
+  background-color: white;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+
+const CenterImage = styled.img`
+  position: relative;
+  margin: auto;
+  display: inline;
+`
+
+const PlayPauseButton: FC<Props> = ({ audioElementRef }) => {
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  const iconUrl = isPlaying
+    ? '/static/images/pause.svg'
+    : '/static/images/play.svg'
+
+  const handlePlayPause = useCallback(() => {
+    if (isPlaying) {
+      audioElementRef.current?.pause()
+      setIsPlaying(false)
+    } else {
+      audioElementRef.current?.play()
+      setIsPlaying(true)
+    }
+  }, [audioElementRef, isPlaying])
+
+  return (
+    <AudioButton onClick={handlePlayPause}>
+      <CenterImage src={iconUrl} />
+    </AudioButton>
+  )
+}
+
+export default PlayPauseButton

src/components/podcasts/PodcastCard.tsx

@@ -0,0 +1,105 @@
+import { FC, useRef } from 'react'
+import styled from 'styled-components'
+import { Podcast } from '../../content/podcast-content'
+import formatDate from '../../utils/date'
+import PlayPauseButton from './PlayPauseButton'
+
+// Props
+// =====
+
+export type Props = {
+  podcast: Podcast
+}
+
+// Helpers
+// =======
+
+const PodcastImage = styled.img`
+  margin: auto;
+  width: auto;
+  display: block;
+`
+const PodcastImageContainer = styled.div`
+  background: #f2dac9;
+  margin: auto;
+  display: block;
+  opacity: 1;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%;
+`
+const PodcastTitleContainter = styled.div`
+  padding-top: 20px;
+  display: block;
+  height: 90px;
+  max-width: 90%;
+  margin: 0 auto;
+  overflow: hidden;
+`
+
+const PodcastBodyContainer = styled.div`
+  background: white;
+  text-align: center;
+  word-wrap: break-word;
+  color: #4f463f;
+  font: Bold 18px/22px Lato;
+  letter-spacing: 0px;
+  width: 100%;
+  height: 200px;
+`
+const PodcastInfo = styled.div`
+  text-align: center;
+  font-weight: 200;
+  margin-bottom: 10px;
+`
+
+const IconContainer = styled.div`
+  position: absolute;
+  bottom: 12px;
+  right: 25px;
+`
+
+// Component
+// =========
+
+const PodcastCard: FC<Props> = ({ podcast }) => {
+  const audioElementRef = useRef<HTMLAudioElement>(null)
+
+  return (
+    <>
+      <PodcastImageContainer>
+        <PodcastImage src={podcast.image.file.url} />
+      </PodcastImageContainer>
+
+      <PodcastBodyContainer>
+        <PodcastTitleContainter>{podcast.title}</PodcastTitleContainter>
+
+        {/*  eslint-disable-next-line jsx-a11y/media-has-caption */}
+        <audio
+          ref={audioElementRef}
+          id={podcast.title}
+          src={podcast.audio.file.url}
+        >
+          Your browser does not support the
+          <code>audio</code> element.
+        </audio>
+
+        <PodcastInfo>
+          {podcast.duration}
+          {' | '}
+          {formatDate(podcast.date)}
+        </PodcastInfo>
+
+        <PlayPauseButton audioElementRef={audioElementRef} />
+
+        <IconContainer>
+          <a href={podcast.audio.file.url} download title="Download">
+            <img src="/static/images/download.svg" alt="" />
+          </a>
+        </IconContainer>
+      </PodcastBodyContainer>
+    </>
+  )
+}
+
+export default PodcastCard