refactor: modularize show-card and episode-card thingies

components/episode-card.module.css

@@ -12,21 +12,9 @@
   object-fit: cover;
 }
 
-.Description {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-.Description > p {
-  margin-block-start: 0em;
-  margin-block-end: 0.5em;
-}
-
 @media (hover: hover) {
   .Card:hover {
     background-color: var(--color-panel-translucent);
-    transition: opacity 60ms;
+    transition: opacity 300ms;
   }
 }

components/episode-card.tsx

@@ -3,11 +3,12 @@ import type { Tables } from '@/types/supabase/database';
 import { Button, Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { format } from 'date-fns';
 import formatDuration from 'format-duration';
-import parseHTML from 'html-react-parser';
 import NextLink from 'next/link';
 import { FaPlay } from 'react-icons/fa6';
 
 import styles from './episode-card.module.css';
+import { EpisodeDescription } from './episode-description';
+import { LineClamp } from './ui/line-clamp';
 
 type Props = Pick<
   Tables<'episode'>,
@@ -45,13 +46,10 @@ export function EpisodeCard(props: Props) {
               </Heading>
 
               {props.description ? (
-                <Text
-                  as="div"
-                  className={styles.Description}
-                  size="2"
-                  trim="start"
-                >
-                  {parseHTML(props.description)}
+                <Text size="2">
+                  <LineClamp>
+                    <EpisodeDescription>{props.description}</EpisodeDescription>
+                  </LineClamp>
                 </Text>
               ) : null}
 

components/episode-description.module.css

@@ -0,0 +1,4 @@
+.Container p {
+  margin-block-start: 0em;
+  margin-block-end: 0.5em;
+}

components/episode-description.tsx

@@ -0,0 +1,12 @@
+import { Text } from '@radix-ui/themes';
+import parseHTML from 'html-react-parser';
+
+import styles from './episode-description.module.css';
+
+export function EpisodeDescription({ children }: { children: string }) {
+  return (
+    <Text className={styles.Container} trim="both">
+      {parseHTML(children)}
+    </Text>
+  );
+}

components/show-card.module.css

@@ -2,13 +2,6 @@
   text-decoration: none;
 }
 
-.Description {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
 .ToggleCard {
   cursor: var(--cursor-button);
 }

components/show-card.tsx

@@ -17,20 +17,16 @@ import { FaCircleCheck, 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'>, 'description' | 'images' | 'title'>;
 
 function ShowCardDescription(props: Pick<Props, 'description'>) {
   if (!props.description) return null;
 
   return (
-    <Text
-      className={styles.Description}
-      color="gray"
-      size="2"
-      title={props.description}
-    >
-      {props.description}
+    <Text color="gray" size="2">
+      <LineClamp>{props.description}</LineClamp>
     </Text>
   );
 }

components/ui/line-clamp.module.css

@@ -0,0 +1,6 @@
+.Container {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  overflow: hidden;
+}

components/ui/line-clamp.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+
+import { Text } from '@radix-ui/themes';
+
+import styles from './line-clamp.module.css';
+
+export function LineClamp({ children }: PropsWithChildren) {
+  return <Text className={styles.Container}>{children}</Text>;
+}