refactor(details): ♻️ Pass only viewTransitionName

TheJiahao · Jan 25, 2025 · 693396e · 693396e
1 parent 7dbdf09
commit 693396e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/src/components/molecules/BlogHeader.astro b/src/components/molecules/BlogHeader.astro
@@ -21,7 +21,7 @@ const id = getUUID(title);
 <header flex="~ col" gap-lg>
     <CoverImage image={image} alt="" viewTransitionName=`image-${id}` />
     <div px-4 lg:px-8>
-        <Details {title} {...props} />
+        <Details {title} viewTransitionName={`title-${id}`} {...props} />
         <div flex="~ row" gap-4>
             <DateComponent {date} viewTransitionName={`date-${id}`} />
 

diff --git a/src/components/molecules/Details.tsx b/src/components/molecules/Details.tsx
@@ -1,19 +1,14 @@
 import parse from "html-react-parser";
-import type { HTMLAttributes } from "react";
-import { getUUID } from "utils/getUUID";
+import type { AnimatedElement } from "interfaces/AnimatedElement";
 import { renderMarkdown } from "utils/renderMarkdown";
-interface DetailsProps extends HTMLAttributes<HTMLDivElement> {
+interface DetailsProps extends AnimatedElement {
     title: string;
     description?: string;
 }
 
-const Details = ({ title, description }: DetailsProps) => (
+const Details = ({ title, description, viewTransitionName }: DetailsProps) => (
     <div text="secondary xl" flex="~ col" gap-sm>
-        <h1
-            text="primary 3xl"
-            font-bold
-            style={{ viewTransitionName: `title-${getUUID(title)}` }}
-        >
+        <h1 text="primary 3xl" font-bold style={{ viewTransitionName }}>
             {title}
         </h1>
 

diff --git a/src/components/molecules/ImageCard.tsx b/src/components/molecules/ImageCard.tsx
@@ -22,7 +22,11 @@ const ImageCard = ({ title, url, image, date, ...props }: ImageCardProps) => {
                     viewTransitionName={`image-${id}`}
                 />
                 <div p-4 lg:p-8 flex="~ col" gap-4>
-                    <Details title={title} {...props} />
+                    <Details
+                        title={title}
+                        viewTransitionName={`title-${id}`}
+                        {...props}
+                    />
 
                     {date && (
                         <DateComponent