refactor: separate components

Author: JuneLin2001

src/components/HomepageHeader.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import styles from "../css/index.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+      </div>
+    </header>
+  );
+}

src/pages/index.module.css src/css/index.module.csssrc/pages/index.module.css renamed to src/css/index.module.css

@@ -1,23 +1,7 @@
 import type { ReactNode } from "react";
-import clsx from "clsx";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import Heading from "@theme/Heading";
-import styles from "./index.module.css";
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-      </div>
-    </header>
-  );
-}
+import { HomepageHeader } from "../components/HomepageHeader";
 
 export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();