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) => (
-
+ style={{
+ color: 'inherit',
+ textDecoration: 'none',
+ }}
+ >
+
+
))}
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;
@@ -130,14 +130,14 @@ export default function SelectShows({
}}
>
{spotifyShows.map(({ show }) => (
- {
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 = {
+export const Base: StoryObj = {
render: () => (
-
),
};
-export const Toggle: StoryObj = {
+export const Toggle: StoryObj = {
render: () => {
// eslint-disable-next-line react-hooks/rules-of-hooks -- storybook
const [selected, setSelected] = useState(false);
return (
- {
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, 'images' | 'title'>;
+type ShowCardProps = Pick, 'images' | 'publisher' | 'title'>;
-function ShowCardImage(props: Pick) {
+function ShowCardRoot(props: React.ComponentPropsWithoutRef<'div'>) {
return (
-
-
- {/* @TODO: SUPA-37 */}
-
-
-
+
+
+ {props.children}
+
+
);
}
-function ShowCardRoot(props: PropsWithChildren) {
+function ShowCardImage(props: Pick) {
return (
-
-
- {props.children}
-
-
+
+
+
+
+ {/* @TODO: SUPA-37 */}
+
+
+
+
+
);
}
-function ShowCardLink(props: Props & { href: string }) {
+function ShowCardText(props: Pick) {
+ return (
+
+
+ {props.title}
+
+
+
+ {props.publisher}
+
+
+ );
+}
+
+export function ShowCard(props: ShowCardProps) {
return (
-
-
-
-
-
+
+
+
@@ -62,53 +86,28 @@ function ShowCardLink(props: Props & { href: string }) {
-
-
+
-
- {props.title}
-
+
+
);
}
-function ShowCardToggle(
- props: Props & { onClick: () => void; selected: boolean },
+export function ShowCardToggle(
+ props: ShowCardProps & { onClick: () => void; selected: boolean },
) {
return (
-
-
-
-
-
-
-
-
- {props.title}
- {props.selected ? (
-
- {' '}
-
-
- ) : null}
-
+
+
+
+
+
);
}
-
-export const ShowCard = {
- Link: ShowCardLink,
- Toggle: ShowCardToggle,
-};