refactor: add All to SocialTypes

src/content/posts/history.mdx

@@ -9,6 +9,7 @@ tags:
 ---
 
 import { SocialLink } from '@/components/SocialLink';
+import { SocialLinks } from '@/partials/SocialLinks';
 import { SocialLinkData } from '@/utils/SocialLinkData';
 
 ## 名前
@@ -95,40 +96,20 @@ import { SocialLinkData } from '@/utils/SocialLinkData';
 
 ## 各種リンク 🔗
 
-<div className="flex flex-wrap gap-1 mt-3">
-{SocialLinkData.filter((link) => link.type === undefined).map((link) => (
-  <SocialLink {...link} />
-))}
-</div>
+<SocialLinks type="Other" />
 
 ### SNS
 
-<div className="flex flex-wrap gap-1 mt-3">
-{SocialLinkData.filter((link) => link.type === "SNS").map((link) => (
-  <SocialLink {...link} />
-))}
-</div>
+<SocialLinks type="SNS" />
 
 ### Blog
 
-<div className="flex flex-wrap gap-1 mt-3">
-{SocialLinkData.filter((link) => link.type === "Blog").map((link) => (
-  <SocialLink {...link} />
-))}
-</div>
+<SocialLinks type="Blog" />
 
 ### Slide
 
-<div className="flex flex-wrap gap-1 mt-3">
-{SocialLinkData.filter((link) => link.type === "Slide").map((link) => (
-  <SocialLink {...link} />
-))}
-</div>
+<SocialLinks type="Slide" />
 
 ### Career
 
-<div className="flex flex-wrap gap-1 mt-3">
-{SocialLinkData.filter((link) => link.type === "Career").map((link) => (
-  <SocialLink {...link} />
-))}
-</div>
+<SocialLinks type="Career" />

src/partials/SocialLinks.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SocialLinks } from "./SocialLinks";
+
+const metaData: Meta = {
+  title: "SocialLinks",
+  component: SocialLinks,
+};
+
+export default metaData;
+
+export const All: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "All",
+  },
+};
+
+export const Blog: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "Blog",
+  },
+};
+
+export const Career: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "Career",
+  },
+};
+
+export const SNS: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "SNS",
+  },
+};
+
+export const Slide: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "Slide",
+  },
+};
+
+export const Other: StoryObj<typeof SocialLinks> = {
+  args: {
+    type: "Other",
+  },
+};

src/partials/SocialLinks.tsx

@@ -1,10 +1,26 @@
 import { SocialLink } from "@/components/SocialLink";
-import { SocialLinkData } from "@/utils/SocialLinkData";
+import { SocialLinkData, type SocialTypes } from "@/utils/SocialLinkData";
 
-export const SocialLinks = () => (
-  <>
-    {SocialLinkData.filter((link) => link.isTop).map((link) => (
-      <SocialLink key={link.name} {...link} />
-    ))}
-  </>
+type ISocialLinksProps = {
+  type: SocialTypes;
+  topOnly: boolean;
+};
+
+export const SocialLinks: React.FC<ISocialLinksProps> = ({
+  type,
+  topOnly = false,
+}) => (
+  <div className="flex flex-wrap gap-1">
+    {SocialLinkData.filter((link) => {
+      if (type === "All") return true;
+      return link.type === type;
+    })
+      .filter((link) => {
+        if (topOnly) return link.isTop;
+        return true;
+      })
+      .map((link) => (
+        <SocialLink key={link.name} {...link} />
+      ))}
+  </div>
 );

src/templates/SelfIntroduction.astro

@@ -42,9 +42,7 @@ const iconIds = {
          で働いています。CI/CD、IaC、Public Cloud 周りの技術が好きです。
       </p>
 
-      <div class="mt-3 flex flex-wrap gap-1">
-        <SocialLinks />
-      </div>
+      <SocialLinks type="All" topOnly={true} />
     </div>
 
     <div class="hidden shrink-0 md:block my-icon h-72 w-72" id={iconIds.large}>

src/utils/SocialLinkData.ts

@@ -1,12 +1,12 @@
-type SocialTypes = "Blog" | "SNS" | "Slide" | "Career";
+export type SocialTypes = "All" | "Blog" | "SNS" | "Slide" | "Career" | "Other";
 
 export type ISocialLink = {
   url: string;
   name: string;
   imgSrc: string;
   height: number;
   width: number;
-  type?: SocialTypes;
+  type: SocialTypes;
   isTop: boolean;
 };
 
@@ -17,6 +17,7 @@ export const SocialLinkData: Array<ISocialLink> = [
     imgSrc: "/assets/images/shields_github.svg",
     height: 20,
     width: 65,
+    type: "Other",
     isTop: true,
   },
   {