From 160ee3a05f1ab11a02aa46d8a553c0f1e36da870 Mon Sep 17 00:00:00 2001
From: SleepSheep <yeahhuangyue@163.com>
Date: Mon, 23 Jun 2025 15:11:14 +0800
Subject: [PATCH 1/2] feat: add left and right arrow click handlers for
 language selection

---
 .../home/components/HomepageCodeDisplay.tsx   | 119 +++++++++++-------
 1 file changed, 73 insertions(+), 46 deletions(-)

diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx b/src/pages/home/components/HomepageCodeDisplay.tsx
index b1a6663bd9..50a91642e3 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -56,6 +56,20 @@ export default function HomepageCodeDisplay() {
       });
   };
 
+  const handleLeftArrowClick = () => {
+    const currentIndex = langs.indexOf(selectedLang);
+    setSelectedLang(
+      langs[currentIndex > 0 ? currentIndex - 1 : langs.length - 1]
+    );
+    startAutoSlide();
+  };
+
+  const handleRightArrowClick = () => {
+    const currentIndex = langs.indexOf(selectedLang);
+    setSelectedLang(langs[(currentIndex + 1) % langs.length]);
+    startAutoSlide();
+  };
+
   return (
     <div className="flex flex-col md:flex-row items-center justify-center md:m-32 m-6 space-y-6 md:space-y-0 md:space-x-8">
       {/* Pic */}
@@ -75,56 +89,69 @@ export default function HomepageCodeDisplay() {
           height: "666px",
         }}
       >
-        {/* Top Bar */}
-        <div className="flex items-center px-3 py-2 bg-[#1e1e2f]">
-          <div className="space-x-3 overflow-auto">
-            {langs.map((lang) => (
-              <button
-                key={lang}
-                onClick={() => handleLangChange(lang)}
-                className={`px-3 py-1 rounded-full text-sm font-medium border border-gray-500 duration-200 ${selectedLang === lang
-                  ? "bg-blue-600 text-white"
-                  : "bg-gray-600 text-gray-300 hover:bg-gray-500"
-                  }`}
+        <div className="flex items-center justify-between">
+          <div onClick={handleLeftArrowClick}>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tbGVmdC1pY29uIGx1Y2lkZS1jaGV2cm9uLWxlZnQiPjxwYXRoIGQ9Im0xNSAxOC02LTYgNi02Ii8+PC9zdmc+"
+              alt="arrow-left"
+            />
+          </div>
+          <div>
+            {/* Top Bar */}
+            <div className="flex items-center px-3 bg-[#1e1e2f]">
+              <div className="space-x-3 overflow-auto">
+                {langs.map((lang) => (
+                  <button
+                    key={lang}
+                    onClick={() => handleLangChange(lang)}
+                    className={`px-3 py-1 rounded-full text-sm font-medium border border-gray-500 duration-200 ${
+                      selectedLang === lang
+                        ? "bg-blue-600 text-white"
+                        : "bg-gray-600 text-gray-300 hover:bg-gray-500"
+                    }`}
+                  >
+                    {CODE_EXAMPLES[lang].label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {/* Code Area with animation and scroll */}
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={selectedLang}
+                initial={{ opacity: 0, x: 50 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -50 }}
+                transition={{ duration: 0.4 }}
+                className="relative w-full h-full max-w-lg"
               >
-                {CODE_EXAMPLES[lang].label}
-              </button>
-            ))}
+                <button
+                  onClick={copyToClipboard}
+                  className="absolute top-5 right-5 z-10 text-xs px-2 rounded border border-gray-500 text-white hover:bg-white/10 transition"
+                >
+                  {copyMessage || "Copy"}
+                </button>
+                <div className="w-full h-full overflow-auto px-4 py-1">
+                  <SyntaxHighlighter
+                    language={selectedLang}
+                    style={dracula}
+                    wrapLongLines={true}
+                    codeTagProps={{ className: "text-sm bg-transparent" }}
+                  >
+                    {CODE_EXAMPLES[selectedLang].code}
+                  </SyntaxHighlighter>
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          </div>
+          <div onClick={handleRightArrowClick}>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg=="
+              alt="arrow-right"
+            />
           </div>
         </div>
-
-
-        {/* Code Area with animation and scroll */}
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={selectedLang}
-            initial={{ opacity: 0, x: 50 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -50 }}
-            transition={{ duration: 0.4 }}
-            className="relative w-full h-full"
-          >
-            <button
-              onClick={copyToClipboard}
-              className="absolute top-5 right-5 z-10 text-xs px-2 py-1 rounded border border-gray-500 text-white hover:bg-white/10 transition"
-            >
-              {copyMessage || "Copy"}
-            </button>
-            <div className="w-full h-full overflow-auto px-4 py-2">
-              <SyntaxHighlighter
-                language={selectedLang}
-                style={dracula}
-                wrapLongLines={true}
-                codeTagProps={{ className: "text-sm bg-transparent" }}
-              >
-                {CODE_EXAMPLES[selectedLang].code}
-              </SyntaxHighlighter>
-            </div>
-          </motion.div>
-        </AnimatePresence>
-
       </div>
     </div>
-
   );
 }

From 410d0b7e352e2b07baf47ea01e089e61adaed3de Mon Sep 17 00:00:00 2001
From: SleepSheep <yeahhuangyue@163.com>
Date: Wed, 2 Jul 2025 17:00:50 +0800
Subject: [PATCH 2/2] fix: change arrow buttons' style

---
 src/constants/index.ts                        |  2 +-
 .../home/components/HomepageCodeDisplay.tsx   | 57 ++++++++++++++-----
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index 77b20b3bc7..78dd09b8dd 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -22,7 +22,7 @@ public class Example {
     // Registering types can reduce class name serialization
     // overhead but not mandatory.
     // If secure mode enabled
-    //all custom types must be registered.
+    // all custom types must be registered.
     fory.register(SomeClass.class);
   }
 
diff --git a/src/pages/home/components/HomepageCodeDisplay.tsx b/src/pages/home/components/HomepageCodeDisplay.tsx
index 50a91642e3..cbd7ca636b 100644
--- a/src/pages/home/components/HomepageCodeDisplay.tsx
+++ b/src/pages/home/components/HomepageCodeDisplay.tsx
@@ -75,26 +75,40 @@ export default function HomepageCodeDisplay() {
       {/* Pic */}
       <div className="hidden md:flex w-full md:w-1/2 justify-center">
         <img
+          className="w-full max-w-md h-auto"
           src={programmingImageUrl}
           alt="programming-coding"
-          className="w-full max-w-md h-auto"
         />
       </div>
       {/* Code Box */}
       <div
-        className="relative text-sm overflow-hidden bg-[#1e1e2f]rounded-lg"
+        className="w-full relative text-sm overflow-hidden bg-[#1e1e2f]rounded-lg"
         style={{
           width: "100%",
-          maxWidth: "600px",
-          height: "666px",
+          maxWidth: "666px",
         }}
       >
         <div className="flex items-center justify-between">
-          <div onClick={handleLeftArrowClick}>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tbGVmdC1pY29uIGx1Y2lkZS1jaGV2cm9uLWxlZnQiPjxwYXRoIGQ9Im0xNSAxOC02LTYgNi02Ii8+PC9zdmc+"
-              alt="arrow-left"
-            />
+          <div>
+            <button
+              className="flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-lg hover:shadow-xl transition-shadow focus:outline-none"
+              onClick={handleLeftArrowClick}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6 text-gray-700"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
           </div>
           <div>
             {/* Top Bar */}
@@ -144,11 +158,26 @@ export default function HomepageCodeDisplay() {
               </motion.div>
             </AnimatePresence>
           </div>
-          <div onClick={handleRightArrowClick}>
-            <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg=="
-              alt="arrow-right"
-            />
+          <div>
+            <button
+              className="flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-lg hover:shadow-xl transition-shadow focus:outline-none"
+              onClick={handleRightArrowClick}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6 text-gray-700"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
           </div>
         </div>
       </div>