記述の重複を避けるように分ける

k35o · Jul 31, 2024 · 0696ee2 · 0696ee2
1 parent 4e498ed
commit 0696ee2
Showing 1 changed file with 46 additions and 46 deletions.
diff --git a/src/app/blog/_components/blog-card/blog-card.tsx b/src/app/blog/_components/blog-card/blog-card.tsx
@@ -2,67 +2,67 @@ import { Heading } from '@/components/heading';
 import { TextTag } from '@/components/text-tag';
 import { isInternalRoute } from '@/utils/is-internal-route';
 import Link from 'next/link';
+import { FC } from 'react';
 
-export const BlogCard = ({
-  link,
-  emotion,
-  title,
-  tags,
-}: {
+type BlogCardProps = {
   link: string;
   emotion: string;
   title: string;
   tags: [string?, string?, string?, string?, string?];
+};
+
+export const BlogCard: FC<BlogCardProps> = ({
+  link,
+  emotion,
+  title,
+  tags,
 }) => {
   return (
     <section className="h-40 rounded-xl bg-white shadow-md">
       {isInternalRoute(link) ? (
         <Link href={link}>
-          <div className="flex gap-6 p-4">
-            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-lg bg-bgLight text-7xl">
-              {emotion}
-            </div>
-            <div className="flex w-full flex-col justify-around">
-              <Heading type="h3" lineClamp={3}>
-                {title}
-              </Heading>
-              {tags.length > 0 && (
-                <div className="hidden justify-end gap-2 md:flex">
-                  {tags.map((tag) => {
-                    if (!tag) {
-                      return null;
-                    }
-                    return <TextTag key={tag} text={tag} />;
-                  })}
-                </div>
-              )}
-            </div>
-          </div>
+          <BlogCardContent
+            emotion={emotion}
+            title={title}
+            tags={tags}
+          />
         </Link>
       ) : (
         <a href={link} target="_blank" rel="noopener noreferrer">
-          <div className="flex gap-6 p-4">
-            <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-lg bg-bgLight text-7xl">
-              {emotion}
-            </div>
-            <div className="flex w-full flex-col justify-around">
-              <Heading type="h3" lineClamp={3}>
-                {title}
-              </Heading>
-              {tags.length > 0 && (
-                <div className="hidden justify-end gap-2 md:flex">
-                  {tags.map((tag) => {
-                    if (!tag) {
-                      return null;
-                    }
-                    return <TextTag key={tag} text={tag} />;
-                  })}
-                </div>
-              )}
-            </div>
-          </div>
+          <BlogCardContent
+            emotion={emotion}
+            title={title}
+            tags={tags}
+          />
         </a>
       )}
     </section>
   );
 };
+
+export const BlogCardContent: FC<Omit<BlogCardProps, 'link'>> = ({
+  emotion,
+  title,
+  tags,
+}) => (
+  <div className="flex gap-6 p-4">
+    <div className="flex h-32 w-32 shrink-0 items-center justify-center rounded-lg bg-bgLight text-7xl">
+      {emotion}
+    </div>
+    <div className="flex w-full flex-col justify-around">
+      <Heading type="h3" lineClamp={3}>
+        {title}
+      </Heading>
+      {tags.length > 0 && (
+        <div className="hidden justify-end gap-2 md:flex">
+          {tags.map((tag) => {
+            if (!tag) {
+              return null;
+            }
+            return <TextTag key={tag} text={tag} />;
+          })}
+        </div>
+      )}
+    </div>
+  </div>
+);