From f78217e56a6af132e7e2a1f49c53d475c35c864f Mon Sep 17 00:00:00 2001
From: whats2000 <whats2000mc@gmail.com>
Date: Tue, 20 Feb 2024 00:25:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9:=20=E6=9B=B4=E6=96=B0API?=
 =?UTF-8?q?=E6=96=87=E6=AA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PageHeader.tsx | 37 +++++++++++++++-------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index 48ebc3b..a79f13b 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -60,24 +60,27 @@ const SubHeaderText = styled.h2`
 
 
 /**
- * PageHeader component to display a header with a background component.
- * @param backgroundComponent {JSX.Element} The background component to display.
- * (Video, Image, etc.)
- * @param headerTextArray {string[]} The array of header text to display.
- * If useTyped is true, the array will be used as the strings for the ReactTyped component.
- * If useTyped is false, the array will be used as the header text and subheader text.
- * @param useTyped {boolean} Whether to use the ReactTyped component to display the header text.
- * @constructor PageHeader Component.
+ * Renders a PageHeader component with customizable background and header text.
+ * This component can display the header text with dynamic typing animation
+ * when `useTyped` is enabled.
+ *
+ * @param backgroundComponent {JSX.Element} - The JSX component used as a background (e.g., Video, Image).
+ * @param headerTextArray {string[]} - An array of strings for header text.
+ *   If `useTyped` is true, texts are displayed with typing animation via ReactTyped.
+ *   If `useTyped` is false, the first string is the main header and others are subheaders, displayed without typing animation.
+ * @param useTyped {boolean} - Flag to enable/disable typing animation for displaying header text.
+ * @constructor - React Component
  */
-const PageHeader = ({
-                      backgroundComponent,
-                      headerTextArray,
-                      useTyped = false
-                    }: {
-  backgroundComponent: JSX.Element,
-  headerTextArray: string[],
-  useTyped?: boolean,
-}) => {
+const PageHeader = (
+  {
+    backgroundComponent,
+    headerTextArray,
+    useTyped = false
+  }: {
+    backgroundComponent: JSX.Element,
+    headerTextArray: string[],
+    useTyped?: boolean,
+  }) => {
   const { y } = useScroll();
   const innerHeight = window.innerHeight;
   const maskAOpacity = 0.6 - (y / innerHeight) * 1.2;