Unify code and styles for tiles

package.json

@@ -24,7 +24,6 @@
     "@astrojs/image": "0.12.0",
     "@iconify-icon/react": "1.0.2",
     "@tippyjs/react": "4.2.6",
-    "clsx": "1.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "17.4.0"

src/components/atoms/book-tile.astro

@@ -8,25 +8,27 @@ export interface Props {
   value: Book;
 }
 
-const { value } = Astro.props;
+const {
+  value: { author, cover, title, url },
+} = Astro.props;
 ---
 
-<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-[3/4] object-cover"
     format="webp"
     fit={'cover'}
     aspectRatio={3 / 4}
     quality={100}
-    src={value.cover}
+    src={cover}
-    alt={value.title}
+    alt={title}
   />
   <div class="w-full gap-1">
-    <Typography class="leading-5, hover:text-gray-900" variant="tile-title">
+    <Typography variant="tile-title">
-      {value.title}
+      {title}
     </Typography>
     <Typography variant="tile-subtitle">
-      {value.author}
+      {author}
     </Typography>
   </div>
 </a>

src/components/atoms/media-tile.astro

@@ -8,25 +8,27 @@ export interface Props {
   value: Media;
 }
 
-const { value } = Astro.props;
+const {
+  value: { image, title, type, url },
+} = Astro.props;
 ---
 
-<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-square object-cover"
     fit="cover"
     format="webp"
     aspectRatio={1}
     quality={100}
-    src={value.image}
+    src={image}
-    alt={value.title}
+    alt={title}
   />
   <div class="gap-1">
-    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
+    <Typography variant="tile-title">
-      {value.title}
+      {title}
     </Typography>
     <Typography variant="tile-subtitle">
-      {value.type}
+      {type}
     </Typography>
   </div>
 </a>

src/components/atoms/person-tile.astro

@@ -8,22 +8,22 @@ export interface Props {
   value: Person;
 }
 
-const { value } = Astro.props;
+const {
+  value: { image, name, url },
+} = Astro.props;
 ---
 
-<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     format="webp"
     fit="cover"
     quality={100}
     aspectRatio={1}
-    src={value.image}
+    src={image}
-    alt={value.name}
+    alt={name}
   />
-  <div class="gap-1">
+  <Typography variant="tile-title">
-    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
+    {name}
-      {value.name}
+  </Typography>
-    </Typography>
-  </div>
 </a>

src/components/atoms/typography.astro

@@ -24,7 +24,7 @@ const variantToElement = {
   paragraph: 'p',
 } as const;
 
-const variantToClassName = {
+const variantToClassName /* tw */ = {
   'main-title': 'text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100',
   'main-subtitle': 'text-md sm:text-lg font-medium text-gray-700 dark:text-gray-100',
   'section-title': 'text-3xl font-extrabold text-gray-900 dark:text-gray-100',
@@ -34,7 +34,7 @@ const variantToClassName = {
   'item-subtitle': 'text-md font-medium text-gray-700 dark:text-gray-100',
   'tile-title': 'text-sm font-medium text-gray-700 dark:text-gray-200',
   'tile-subtitle': 'text-sm font-normal text-gray-500 dark:text-gray-300',
-  paragraph: 'text-sm sm:text-base leading-relaxed font-normal text-gray-500 dark:text-gray-300',
+  paragraph: 'text-sm leading-relaxed font-normal text-gray-500 sm:text-base sm:leading-relaxed dark:text-gray-300',
 };
 
 export interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'slot'> {

src/components/atoms/video-tile.astro

@@ -25,9 +25,7 @@ const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
     src={thumbnail}
     alt={title}
   />
-  <div class="gap-1">
+  <Typography variant="tile-title">
-    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
+    {title}
-      {title}
+  </Typography>
-    </Typography>
-  </div>
 </a>