UI Overhaul

app/components/Album/ErrorBoundary.tsx

@@ -6,7 +6,6 @@ import {
   Container,
   EmojiText,
   Heading,
-  Layout,
   Typography,
 } from '~/components/Base'
 import Document from '~/components/Base/Document'
@@ -37,30 +36,28 @@ const AlbumErrorBoundary: React.FC = () => {
 
   return (
     <Document>
-      <Layout>
-        <Container>
-          <div className={clsx('prose')}>
-            <Heading level="h2">⛔️ Whoops!</Heading>
-            <Typography>
-              We seemed to have run into an error. We are working on fixing it
-              now. You should refresh the page to fix this issue.
-            </Typography>
-            <details className={clsx('mb-6')}>
-              <summary>Detailed error message</summary>
-              <pre className={clsx('whitespace-pre-line')}>{body}</pre>
-            </details>
-            <ButtonLink
-              to={currentPath}
-              disabled={loading}
-              className={clsx('mt-2')}
-            >
-              <EmojiText emoji="🔄" label="refresh icon">
-                Retry
-              </EmojiText>
-            </ButtonLink>
-          </div>
-        </Container>
-      </Layout>
+      <Container>
+        <div className={clsx('prose')}>
+          <Heading level="h2">⛔️ Whoops!</Heading>
+          <Typography>
+            We seemed to have run into an error. We are working on fixing it
+            now. You should refresh the page to fix this issue.
+          </Typography>
+          <details className={clsx('mb-6')}>
+            <summary>Detailed error message</summary>
+            <pre className={clsx('whitespace-pre-line')}>{body}</pre>
+          </details>
+          <ButtonLink
+            to={currentPath}
+            disabled={loading}
+            className={clsx('mt-2')}
+          >
+            <EmojiText emoji="🔄" label="refresh icon">
+              Retry
+            </EmojiText>
+          </ButtonLink>
+        </div>
+      </Container>
     </Document>
   )
 }

app/components/Album/ReviewLink.tsx

@@ -0,0 +1,111 @@
+import { A, Heading } from '~/components/Base'
+import useUTM from '~/hooks/useUTM'
+
+interface Props {
+  publicationSlug: string
+  publicationName: string
+  reviewURL: string | null
+  className?: string
+}
+
+const ReviewLink: React.FC<Props> = ({
+  publicationSlug,
+  publicationName,
+  reviewURL,
+  className,
+}) => {
+  const { createExternalURL } = useUTM()
+
+  if (!reviewURL?.startsWith('http')) {
+    return null
+  }
+
+  const url = createExternalURL(reviewURL, {
+    utm_campaign: 'publication',
+    utm_term: publicationSlug,
+  })
+
+  if (publicationSlug === 'pitchfork') {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Read the{' '}
+        <A href={url.toString()} target="_blank">
+          Pitchfork Review
+        </A>
+      </Heading>
+    )
+  } else if (publicationSlug === 'needle-drop') {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Watch the{' '}
+        <A href={url.toString()} target="_blank">
+          Needle Drop review on YouTube
+        </A>
+      </Heading>
+    )
+  } else if (publicationSlug === '33-13-sound') {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Buy the{' '}
+        <A href={url.toString()} target="_blank">
+          {publicationName} book
+        </A>{' '}
+        about this album
+      </Heading>
+    )
+  } else if (publicationSlug === 'robert-christgau') {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        {url.pathname.includes('get_album.php') ? (
+          <>
+            Read{' '}
+            <A href={url.toString()} target="_blank">
+              {publicationName}'s Consumer Guide™️{' '}
+            </A>{' '}
+            for this album
+          </>
+        ) : (
+          <>
+            Read{' '}
+            <A href={url.toString()} target="_blank">
+              {publicationName}'s musings
+            </A>{' '}
+            about this artist
+          </>
+        )}
+      </Heading>
+    )
+  } else if (publicationSlug === 'resident-advisor') {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Read the{' '}
+        <A href={url.toString()} target="_blank">
+          Resident Advisor Review
+        </A>
+      </Heading>
+    )
+  } else if (
+    publicationSlug === 'bandcamp-daily' &&
+    reviewURL.startsWith('https://')
+  ) {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Read the{' '}
+        <A href={url.toString()} target="_blank">
+          Bandcamp Daily review
+        </A>
+      </Heading>
+    )
+  } else {
+    return (
+      <Heading level="h5" noSpacing className={className}>
+        Read the{' '}
+        <A href={url.toString()} target="_blank">
+          {publicationName} review
+        </A>
+      </Heading>
+    )
+  }
+}
+
+export default ReviewLink

app/components/Base/HomeSection.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import { cn } from '~/lib/util'
 
 import { Heading, Typography } from '~/components/Base'
 
@@ -15,12 +15,12 @@ const HomeSection: React.FC<React.PropsWithChildren<Props>> = ({
   className,
 }) => {
   return (
-    <section className={clsx(className)}>
-      <Heading level="h3" className={clsx('mb-0')}>
+    <section className={cn(className)}>
+      <Heading level="h3" className={cn('mb-0')}>
         {title}
       </Heading>
       {typeof subtitle === 'string' ? (
-        <Typography variant="hint" className={clsx('mb-2')}>
+        <Typography variant="hint" className={cn('mb-2')}>
           {subtitle}
         </Typography>
       ) : (

app/components/Base/index.tsx

@@ -5,7 +5,6 @@ import React from 'react'
 
 import { cn } from '~/lib/util'
 
-export { default as Layout } from './Layout'
 export { default as EmojiText } from './EmojiText'
 
 const headingVariants = cva('', {