feat: add ai badge to episode-card

experiment-station · Dec 15, 2023 · 13b286a · 13b286a
1 parent 797b29d
commit 13b286a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/app/shows/[id]/page.tsx b/app/shows/[id]/page.tsx
@@ -21,7 +21,7 @@ const fetchShowWithEpisodes = async (id: ShowId) => {
 
   const response = await supabase
     .from('show')
-    .select('*, episodes:episode(*)')
+    .select('*, episodes:episode(*, episode_content(id))')
     .eq('id', id)
     .single();
 
@@ -75,7 +75,11 @@ export default async function Page(props: { params: { id: ShowId } }) {
 
         <Grid gap="6">
           {data.episodes.map((episode) => (
-            <EpisodeCard key={episode.id} {...episode} />
+            <EpisodeCard
+              hasContent={Boolean(episode.episode_content)}
+              key={episode.id}
+              {...episode}
+            />
           ))}
         </Grid>
       </Flex>

diff --git a/components/episode-card.stories.tsx b/components/episode-card.stories.tsx
@@ -2,17 +2,32 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EpisodeCard } from './episode-card';
 
-export const Primary: StoryObj<typeof EpisodeCard> = {
+export const WithContent: StoryObj<typeof EpisodeCard> = {
   render: () => (
     <EpisodeCard
       description="Guillermo Rauch (@rauchg) is the CEO of Vercel and the creator of Next.js. In this episode, we talk about how Vercel found extreme product-market fit by focusing on simplification."
       duration={4021}
+      hasContent
       id={1}
       published_date={1699531200}
       title="How Vercel found extreme product-market fit by focusing on simplification | Guillermo Rauch (Vercel's CEO)"
     />
   ),
 };
+
+export const WithoutContent: StoryObj<typeof EpisodeCard> = {
+  render: () => (
+    <EpisodeCard
+      description="Guillermo Rauch (@rauchg) is the CEO of Vercel and the creator of Next.js. In this episode, we talk about how Vercel found extreme product-market fit by focusing on simplification."
+      duration={4021}
+      hasContent
+      id={1}
+      published_date={1699531200}
+      title="How Vercel found extreme product-market fit by focusing on simplification | Guillermo Rauch (Vercel's CEO)"
+    />
+  ),
+};
+
 const meta: Meta<typeof EpisodeCard> = {
   component: EpisodeCard,
 };

diff --git a/components/episode-card.tsx b/components/episode-card.tsx
@@ -1,10 +1,19 @@
 import type { Tables } from '@/types/supabase/database';
 
-import { Button, Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import {
+  Button,
+  Card,
+  Flex,
+  Heading,
+  Link,
+  Text,
+  Tooltip,
+} from '@radix-ui/themes';
 import { format } from 'date-fns';
 import formatDuration from 'format-duration';
 import NextLink from 'next/link';
 import { FaPlay } from 'react-icons/fa6';
+import { PiRobotBold } from 'react-icons/pi';
 
 import styles from './episode-card.module.css';
 import { EpisodeDescription } from './episode-description';
@@ -13,7 +22,9 @@ import { LineClamp } from './ui/line-clamp';
 type Props = Pick<
   Tables<'episode'>,
   'description' | 'duration' | 'id' | 'published_date' | 'title'
->;
+> & {
+  hasContent?: boolean;
+};
 
 export function EpisodeCard(props: Props) {
   return (
@@ -52,11 +63,22 @@ export function EpisodeCard(props: Props) {
                 </Text>
               ) : null}
 
-              <Flex align="center" direction="row" gap="4">
-                <Button highContrast size="1">
-                  <FaPlay />
-                  Play
-                </Button>
+              <Flex align="center" gap="4">
+                <Flex gap="1">
+                  {props.hasContent ? (
+                    <Tooltip content="This episode has AI generated summary">
+                      <Button color="mint" size="1">
+                        <PiRobotBold />
+                        AI
+                      </Button>
+                    </Tooltip>
+                  ) : null}
+
+                  <Button highContrast size="1">
+                    <FaPlay />
+                    Play
+                  </Button>
+                </Flex>
 
                 <Flex gap="1">
                   <Text size="2">{formatDuration(props.duration * 1000)}</Text>