From bed41ade60e2ba326fdf06db790a53a41b9ba1ff Mon Sep 17 00:00:00 2001
From: Altay <altay@zebrastik.com>
Date: Sat, 16 Dec 2023 15:10:35 +0300
Subject: [PATCH] refactor: update layout

---
 app/shows/page.tsx               |  24 ++++--
 components/select-shows.tsx      |   6 +-
 components/show-card.module.css  |   4 -
 components/show-card.stories.tsx |  13 +--
 components/show-card.tsx         | 137 +++++++++++++++----------------
 5 files changed, 96 insertions(+), 88 deletions(-)

diff --git a/app/shows/page.tsx b/app/shows/page.tsx
index 68345bd..221c7e1 100644
--- a/app/shows/page.tsx
+++ b/app/shows/page.tsx
@@ -4,10 +4,13 @@ import { getAccountId } from '@/lib/services/account';
 import { createSupabaseServerClient } from '@/lib/services/supabase/server';
 import { Flex, Grid, Heading } from '@radix-ui/themes';
 import { cookies } from 'next/headers';
+import Link from 'next/link';
 
 const fetchAllShows = async () => {
   const supabase = createSupabaseServerClient(cookies());
-  const response = await supabase.from('show').select('id, title, images');
+  const response = await supabase
+    .from('show')
+    .select('id, title, images, publisher');
 
   return response;
 };
@@ -17,7 +20,7 @@ const _fetchMyShows = async () => {
   const accountId = await getAccountId();
   const response = await supabase
     .from('account_show_relation')
-    .select('id, show (title, images)')
+    .select('id, show (title, images, publisher)')
     .eq('account', accountId);
 
   return response;
@@ -48,12 +51,21 @@ export default async function Page() {
         }}
       >
         {data.map((show) => (
-          <ShowCard.Link
+          <Link
             href={`/shows/${show.id}`}
-            images={show.images}
             key={show.id}
-            title={show.title}
-          />
+            style={{
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            <ShowCard
+              images={show.images}
+              key={show.id}
+              publisher={show.publisher}
+              title={show.title}
+            />
+          </Link>
         ))}
       </Grid>
     </Flex>
diff --git a/components/select-shows.tsx b/components/select-shows.tsx
index eeeac02..8b8f523 100644
--- a/components/select-shows.tsx
+++ b/components/select-shows.tsx
@@ -9,7 +9,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { FaArrowDown } from 'react-icons/fa';
 
-import { ShowCard } from './show-card';
+import { ShowCardToggle } from './show-card';
 
 export type SelectedShow = Pick<SpotifyShow['show'], 'id' | 'name'>;
 
@@ -130,14 +130,14 @@ export default function SelectShows({
         }}
       >
         {spotifyShows.map(({ show }) => (
-          <ShowCard.Toggle
-            description={show.description}
+          <ShowCardToggle
             images={[show.images[1].url]}
             key={show.id}
             onClick={() => {
               setImportStatus({ status: 'stale' });
               handleOnClick(show);
             }}
+            publisher={show.publisher}
             selected={isSelected(show)}
             title={show.name}
           />
diff --git a/components/show-card.module.css b/components/show-card.module.css
index 02e36b4..9e4c8a7 100644
--- a/components/show-card.module.css
+++ b/components/show-card.module.css
@@ -1,7 +1,3 @@
-.Title {
-  text-decoration: none;
-}
-
 .ToggleCard {
   cursor: var(--cursor-button);
 }
diff --git a/components/show-card.stories.tsx b/components/show-card.stories.tsx
index cc1d797..7950d74 100644
--- a/components/show-card.stories.tsx
+++ b/components/show-card.stories.tsx
@@ -3,33 +3,34 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from '@radix-ui/themes';
 import { useState } from 'react';
 
-import { ShowCard } from './show-card';
+import { ShowCard, ShowCardToggle } from './show-card';
 
-export const Link: StoryObj<typeof ShowCard.Link> = {
+export const Base: StoryObj<typeof ShowCard> = {
   render: () => (
-    <ShowCard.Link
-      href="/shows/naval"
+    <ShowCard
       images={[
         'https://static.libsyn.com/p/assets/6/e/9/c/6e9cf22bfd4fc1885f2e77a3093c12a1/Podcast.png',
       ]}
+      publisher="Naval"
       title="Naval"
     />
   ),
 };
 
-export const Toggle: StoryObj<typeof ShowCard.Toggle> = {
+export const Toggle: StoryObj<typeof ShowCardToggle> = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- storybook
     const [selected, setSelected] = useState(false);
 
     return (
-      <ShowCard.Toggle
+      <ShowCardToggle
         images={[
           'https://megaphone.imgix.net/podcasts/9426cbf8-25fe-11ec-a0b4-fb6861cc1eaf/image/In_Depth_Podcast_Logo.jpeg?ixlib=rails-4.3.1&max-w=3000&max-h=3000&fit=crop&auto=format,compress',
         ]}
         onClick={() => {
           setSelected((_selected) => !_selected);
         }}
+        publisher="First Round"
         selected={selected}
         title="In Depth"
       />
diff --git a/components/show-card.tsx b/components/show-card.tsx
index d7889a3..e2e909b 100644
--- a/components/show-card.tsx
+++ b/components/show-card.tsx
@@ -1,5 +1,4 @@
 import type { Tables } from '@/types/supabase/database';
-import type { PropsWithChildren } from 'react';
 
 import {
   AspectRatio,
@@ -9,51 +8,76 @@ import {
   Flex,
   IconButton,
   Inset,
-  Link,
   Text,
 } from '@radix-ui/themes';
-import NextLink from 'next/link';
-import { FaCircleCheck, FaPlay } from 'react-icons/fa6';
+import { FaPlay } from 'react-icons/fa6';
 
 import styles from './show-card.module.css';
 import { Hover } from './ui/hover';
+import { LineClamp } from './ui/line-clamp';
 
-type Props = Pick<Tables<'show'>, 'images' | 'title'>;
+type ShowCardProps = Pick<Tables<'show'>, 'images' | 'publisher' | 'title'>;
 
-function ShowCardImage(props: Pick<Props, 'images' | 'title'>) {
+function ShowCardRoot(props: React.ComponentPropsWithoutRef<'div'>) {
   return (
-    <Inset>
-      <AspectRatio ratio={1}>
-        {/* @TODO: SUPA-37 */}
-        <Avatar
-          alt={`Cover for ${props.title}`}
-          className={styles.Image}
-          fallback="/images/placeholder.png"
-          src={props.images?.[0]}
-        />
-      </AspectRatio>
-    </Inset>
+    <Hover.Root
+      style={{
+        height: '100%',
+      }}
+    >
+      <Card
+        {...props}
+        size="2"
+        style={{
+          height: '100%',
+        }}
+      >
+        {props.children}
+      </Card>
+    </Hover.Root>
   );
 }
 
-function ShowCardRoot(props: PropsWithChildren) {
+function ShowCardImage(props: Pick<ShowCardProps, 'images' | 'title'>) {
   return (
-    <Hover.Root>
-      <Box m="-3" p="3">
-        {props.children}
-      </Box>
-    </Hover.Root>
+    <Box p="3">
+      <Card variant="ghost">
+        <Inset>
+          <AspectRatio ratio={1}>
+            {/* @TODO: SUPA-37 */}
+            <Avatar
+              alt={`Cover for ${props.title}`}
+              className={styles.Image}
+              fallback="/images/placeholder.png"
+              src={props.images?.[0]}
+            />
+          </AspectRatio>
+        </Inset>
+      </Card>
+    </Box>
   );
 }
 
-function ShowCardLink(props: Props & { href: string }) {
+function ShowCardText(props: Pick<ShowCardProps, 'publisher' | 'title'>) {
+  return (
+    <Flex direction="column">
+      <Text highContrast size="2" weight="medium">
+        {props.title}
+      </Text>
+
+      <Text color="gray" size="2">
+        <LineClamp>{props.publisher}</LineClamp>
+      </Text>
+    </Flex>
+  );
+}
+
+export function ShowCard(props: ShowCardProps) {
   return (
     <ShowCardRoot>
-      <Box mb="1" position="relative">
-        <NextLink href={props.href}>
-          <Card>
-            <ShowCardImage images={props.images} title={props.title} />
-          </Card>
+      <Flex direction="column" gap="2">
+        <Box position="relative">
+          <ShowCardImage images={props.images} title={props.title} />
 
           <Hover.Show>
             <Flex bottom="0" gap="2" m="2" position="absolute" right="0">
@@ -62,53 +86,28 @@ function ShowCardLink(props: Props & { href: string }) {
               </IconButton>
             </Flex>
           </Hover.Show>
-        </NextLink>
-      </Box>
+        </Box>
 
-      <Link
-        asChild
-        className={styles.Title}
-        highContrast
-        size="2"
-        tabIndex={-1}
-        weight="medium"
-      >
-        <NextLink href={props.href}>{props.title}</NextLink>
-      </Link>
+        <ShowCardText publisher={props.publisher} title={props.title} />
+      </Flex>
     </ShowCardRoot>
   );
 }
 
-function ShowCardToggle(
-  props: Props & { onClick: () => void; selected: boolean },
+export function ShowCardToggle(
+  props: ShowCardProps & { onClick: () => void; selected: boolean },
 ) {
   return (
-    <ShowCardRoot>
-      <Box mb="1" position="relative">
-        <Card
-          aria-selected={props.selected}
-          className={styles.ToggleCard}
-          data-accent-color="grass"
-          onClick={props.onClick}
-        >
-          <ShowCardImage images={props.images} title={props.title} />
-        </Card>
-      </Box>
-
-      <Text className={styles.Title} highContrast size="2" weight="medium">
-        {props.title}
-        {props.selected ? (
-          <Text color="grass" size="1">
-            {' '}
-            <FaCircleCheck />
-          </Text>
-        ) : null}
-      </Text>
+    <ShowCardRoot
+      aria-selected={props.selected}
+      className={styles.ToggleCard}
+      data-accent-color="grass"
+      onClick={props.onClick}
+    >
+      <Flex direction="column" gap="2">
+        <ShowCardImage images={props.images} title={props.title} />
+        <ShowCardText publisher={props.publisher} title={props.title} />
+      </Flex>
     </ShowCardRoot>
   );
 }
-
-export const ShowCard = {
-  Link: ShowCardLink,
-  Toggle: ShowCardToggle,
-};