chore(typescript): enable strict mode

src/components/global/BestPracticeFigure/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
 import './best-practice-figure.css';
 
@@ -54,6 +54,14 @@ export default function BestPracticeFigure({
   doImage,
   doNotImage,
   cautionImage,
+}: {
+  text: ReactNode;
+  doText: ReactNode;
+  doNotText?: ReactNode;
+  cautionText?: ReactNode;
+  doImage: ReactNode;
+  doNotImage?: ReactNode;
+  cautionImage?: ReactNode;
 }) {
   return (
     <div className="best-practice__container">

src/components/global/Codepen/index.tsx

@@ -2,7 +2,15 @@ import React, { type ReactNode } from 'react';
 
 import { useScript } from '@site/src/utils/hooks';
 
-function CodePen(props): ReactNode {
+function CodePen(props: {
+  height?: number | string;
+  theme?: string;
+  defaultTab?: string;
+  user?: string;
+  slug?: string;
+  preview?: boolean;
+  penTitle?: string;
+}): ReactNode {
   const status = useScript('https://static.codepen.io/assets/embed/ei.js');
   // console.log('test',status, props)
   return (

src/components/global/DocsCard/index.tsx

@@ -53,11 +53,10 @@ function DocsCard(props: Props): ReactNode {
     </>
   );
 
-  const className = clsx({
+  const className = clsx(props.className, {
     'Card-with-image': typeof props.img !== 'undefined',
     'Card-without-image': typeof props.img === 'undefined',
     'Card-size-lg': props.size === 'lg',
-    [props.className]: props.className,
   });
 
   if (isStatic) {

src/components/global/DocsCards/index.tsx

@@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react';
 
 import './cards.css';
 
-function DocsCards(props): ReactNode {
+function DocsCards(props: { className?: string; children?: ReactNode }): ReactNode {
   return <docs-cards class={props.className}>{props.children}</docs-cards>;
 }