refactor: update layout

experiment-station · Dec 16, 2023 · 4381cd7 · 4381cd7
1 parent 74d3cab
commit 4381cd7
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 92 deletions.
diff --git a/app/shows/page.tsx b/app/shows/page.tsx
@@ -6,10 +6,13 @@ import { getAccountId } from '@/lib/services/account';
 import { createSupabaseServerClient } from '@/lib/services/supabase/server';
 import { Flex, Grid, Heading, Separator } 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;
 };
@@ -19,7 +22,7 @@ const fetchMyShows = async () => {
   const accountId = await getAccountId();
   const response = await supabase
     .from('account_show_relation')
-    .select('show (id, title, images)')
+    .select('show (id, title, images, publisher)')
     .eq('account', accountId)
     .not('show', 'is', null);
 
@@ -68,14 +71,23 @@ export default async function Page() {
             }}
           >
             {myShows.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}
+                  publisher={show.publisher}
+                  title={show.title}
+                />
+              </Link>
             ))}
           </Grid>
+
           <Separator
             orientation="horizontal"
             size="4"
@@ -102,12 +114,20 @@ export default async function Page() {
         }}
       >
         {showsData?.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}
+              publisher={show.publisher}
+              title={show.title}
+            />
+          </Link>
         ))}
       </Grid>
     </Flex>

diff --git 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
@@ -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
@@ -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
@@ -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,
-};