Feat/track page

firebase.json

@@ -5,7 +5,7 @@
     },
     "ui": {
       "enabled": true,
-      "port": 5000
+      "port": 8000
     }
   }
 }

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/tracks/[id].tsx

@@ -0,0 +1,59 @@
+import type {
+  GetStaticPaths,
+  GetStaticProps,
+  GetStaticPropsContext,
+} from 'next'
+import type { FC } from 'react'
+import type { Track } from 'spotify-web-sdk'
+import { useRouter } from 'next/router'
+
+import spotify from '@/node/lib/spotify'
+import PageHeader from '@/components/common/PageHeader'
+import TrackMetadata from '@/components/track/TrackMetadata'
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: true,
+  }
+}
+
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
+  const trackId = (context.params?.id as string) ?? ''
+  const trackInfo = await spotify.getTrack(trackId)
+
+  return {
+    props: { trackInfo: JSON.parse(JSON.stringify(trackInfo.toJSON())) },
+  }
+}
+
+interface Props {
+  trackInfo: Track
+}
+
+const TrackPage: FC<Props> = ({ trackInfo }) => {
+  const router = useRouter()
+  const isLoading = router.isFallback
+
+  return (
+    <PageHeader
+      imgURL={trackInfo?.album?.imageUrl}
+      imgALT={trackInfo?.albumName}
+      rating={10}
+      loading={isLoading}
+    >
+      <TrackMetadata
+        name={trackInfo?.name}
+        artist={trackInfo?.mainArtists[0].name}
+        album={trackInfo?.albumName}
+        length={trackInfo?.length}
+        releaseDate={trackInfo?.album.releaseDate}
+        spotifyURL={trackInfo?.uri}
+      />
+    </PageHeader>
+  )
+}
+
+export default TrackPage

react/components/album/AlbumPageHeader/index.tsx

@@ -6,7 +6,7 @@ import type { ThemeUIStyleObject } from 'theme-ui'
 import Skeleton from '@/components/common/Skeleton'
 import SkeletonImage from '@/components/common/SkeletonImage'
 
-import AlbumRatingBadge from './AlbumRatingBadge'
+import AlbumRatingBadge from '../../common/RatingBadge'
 import AlbumMetadata from './AlbumMetadata'
 
 const containerStyles: ThemeUIStyleObject = {

react/components/common/PageHeader.tsx

@@ -0,0 +1,50 @@
+import { Flex } from '@theme-ui/components'
+import type { ThemeUIStyleObject } from 'theme-ui'
+import type { PropsWithChildren } from 'hoist-non-react-statics/node_modules/@types/react'
+
+import RatingBadge from '@/components/common/RatingBadge'
+import SkeletonImage from '@/components/common/SkeletonImage'
+
+const containerStyles: ThemeUIStyleObject = {
+  flexDirection: ['column', 'column', 'row'],
+  backgroundColor: 'muted.0',
+  width: '100%',
+  padding: [3, 4, 6, 16],
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}
+
+interface Props {
+  imgURL?: string
+  imgALT?: string
+  loading?: boolean
+  rating?: number
+}
+
+const PageHeader = ({
+  imgURL,
+  imgALT,
+  rating = 5,
+  loading = false,
+  children,
+}: PropsWithChildren<Props>) => {
+  return (
+    <Flex sx={containerStyles}>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Flex sx={{ marginRight: 4 }}>
+          <SkeletonImage
+            loading={loading}
+            alt={imgALT ?? ''}
+            src={imgURL ?? ''}
+            height={280}
+            width={280}
+          />
+        </Flex>
+        {children}
+      </Flex>
+      <RatingBadge rating={rating} />
+    </Flex>
+  )
+}
+
+export default PageHeader

react/components/album/AlbumPageHeader/AlbumRatingBadge.tsx → react/components/common/RatingBadge.tsx

@@ -19,8 +19,8 @@ interface Props {
   rating: number
 }
 
-const AlbumRatingBadge: FC<Props> = ({ rating }) => (
+const RatingBadge: FC<Props> = ({ rating }) => (
   <Badge sx={ratingBadgeStyles}>{rating}</Badge>
 )
 
-export default AlbumRatingBadge
+export default RatingBadge

react/components/track/TrackMetadata/index.tsx

@@ -0,0 +1,60 @@
+import { Box, Heading, Link } from '@theme-ui/components'
+import { defineMessages, FormattedDate, FormattedMessage } from 'react-intl'
+
+const messages = defineMessages({
+  byArtists: { id: 'musicritic.album-page.by-artists' },
+  releaseDate: { id: 'musicritic.album-page.release-date' },
+  openOnSpotify: { id: 'musicritic.album-page.open-on-spotify' },
+})
+
+interface Props {
+  name: string
+  artist: string
+  album: string
+  length: string
+  releaseDate: string
+  spotifyURL: string
+}
+
+const TrackMetadata = ({
+  name,
+  artist,
+  album,
+  length,
+  releaseDate,
+  spotifyURL,
+}: Props) => {
+  const formattedReleaseDate = (
+    <FormattedDate
+      value={releaseDate}
+      year="numeric"
+      month="long"
+      day="2-digit"
+    />
+  )
+
+  return (
+    <Box>
+      <Heading variant="title">{name}</Heading>
+      <Heading variant="subtitle">
+        <FormattedMessage
+          {...messages.byArtists}
+          values={{ artists: artist }}
+        />
+      </Heading>
+      <Box>{album}</Box>
+      <Box sx={{ marginBottom: 4 }}>
+        <FormattedMessage
+          {...messages.releaseDate}
+          values={{ date: formattedReleaseDate }}
+        />{' '}
+        · {length}
+      </Box>
+      <Link href={spotifyURL ?? '/'} variant="button">
+        <FormattedMessage {...messages.openOnSpotify} />
+      </Link>
+    </Box>
+  )
+}
+
+export default TrackMetadata

react/providers/theme.ts

@@ -73,6 +73,7 @@ export const theme: Theme | Record<string, ThemeUIStyleObject> = {
   },
   links: {
     button: {
+      display: 'inline-block',
       border: '1px solid',
       borderColor: 'muted.4',
       color: 'muted.4',