From af6c1e7927f5d9cda6faa5a3e84dcc572b208697 Mon Sep 17 00:00:00 2001
From: Ryota Ikezawa <pavegy@gmail.com>
Date: Sun, 17 Mar 2024 12:11:04 +0000
Subject: [PATCH] :recycle: Improved custom component and initializing mdx
 components

---
 components/custom-heading.tsx | 37 +++++++++++++++++++++--------------
 components/mdx-components.tsx | 14 ++++++-------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/components/custom-heading.tsx b/components/custom-heading.tsx
index 486b34b..2d4a2c3 100644
--- a/components/custom-heading.tsx
+++ b/components/custom-heading.tsx
@@ -1,18 +1,25 @@
 import { Link2Icon } from '@radix-ui/react-icons';
-import React from 'react';
+import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-type CustomHeadingProps = React.ComponentPropsWithRef<
-  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-> & { Component: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' };
+type HeadingProps = DetailedHTMLProps<
+  HTMLAttributes<HTMLHeadingElement>,
+  HTMLHeadingElement
+>;
 
-function CustomHeading({
+type CustomHeadingProps = HeadingProps & {
+  Component: keyof JSX.IntrinsicElements;
+};
+
+const CustomHeading = ({
   Component,
   id,
   children,
   ...others
-}: CustomHeadingProps) {
+}: CustomHeadingProps) => {
+  const ComponentType = Component as any; // Cast to any to bypass type checking
+
   return (
-    <Component
+    <ComponentType
       id={id}
       className="group scroll-mt-24 whitespace-pre-wrap"
       {...others}
@@ -25,25 +32,25 @@ function CustomHeading({
       >
         <Link2Icon className="h-4 w-4" />
       </a>
-    </Component>
+    </ComponentType>
   );
-}
+};
 
-export const CustomH1 = (props: React.ComponentPropsWithRef<'h1'>) => (
+export const CustomH1 = (props: HeadingProps) => (
   <CustomHeading Component="h1" {...props} />
 );
-export const CustomH2 = (props: React.ComponentPropsWithRef<'h2'>) => (
+export const CustomH2 = (props: HeadingProps) => (
   <CustomHeading Component="h2" {...props} />
 );
-export const CustomH3 = (props: React.ComponentPropsWithRef<'h3'>) => (
+export const CustomH3 = (props: HeadingProps) => (
   <CustomHeading Component="h3" {...props} />
 );
-export const CustomH4 = (props: React.ComponentPropsWithRef<'h4'>) => (
+export const CustomH4 = (props: HeadingProps) => (
   <CustomHeading Component="h4" {...props} />
 );
-export const CustomH5 = (props: React.ComponentPropsWithRef<'h5'>) => (
+export const CustomH5 = (props: HeadingProps) => (
   <CustomHeading Component="h5" {...props} />
 );
-export const CustomH6 = (props: React.ComponentPropsWithRef<'h6'>) => (
+export const CustomH6 = (props: HeadingProps) => (
   <CustomHeading Component="h6" {...props} />
 );
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index a7f02c4..8ceb467 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -12,13 +12,13 @@ import {
 
 const components = {
   CustomImage,
-  CustomH1,
-  CustomH2,
-  CustomH3,
-  CustomH4,
-  CustomH5,
-  CustomH6,
-  CustomLink,
+  "h1": CustomH1,
+  "h2": CustomH2,
+  "h3": CustomH3,
+  "h4": CustomH4,
+  "h5": CustomH5,
+  "h6": CustomH6,
+  "a": CustomLink,
 };
 
 interface MdxProps {