From 43ac7d2f48e82a24686ee0e3744102770aa33674 Mon Sep 17 00:00:00 2001
From: guofei <guofeichu@gmail.com>
Date: Wed, 23 Oct 2024 16:10:30 +0800
Subject: [PATCH] fix: change click area

---
 src/app/components/Examples.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Examples.tsx b/src/app/components/Examples.tsx
index 50cece8..8d9644b 100644
--- a/src/app/components/Examples.tsx
+++ b/src/app/components/Examples.tsx
@@ -26,18 +26,20 @@ export default function Examples(props: { dict: Record<string, string>; lang: st
         {examples.map((item: { icon: string | undefined; url: string }, index: number) => {
           return (
             <div key={"key" + index} className="cursor-pointer relative group mb-[60px] w-1/4 flex justify-center">
-              <div className="hover:scale-[1.15] transition ease-in-out duration-300 hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]">
+              <div
+                className="hover:scale-[1.15] transition ease-in-out duration-300 hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]"
+                onClick={() => {
+                  document.body.style.overflow = "hidden";
+                  setPreviewInfo({
+                    preview: true,
+                    url: item.url,
+                  });
+                }}
+              >
                 <img className="rounded-[60px] w-[280px] h-[280px]" src={item.icon} alt="" />
                 <div
                   className="absolute bottom-0 w-full h-[81px] bg-[#002653] text-center text-white text-[30px] hidden group-hover:block "
                   style={{ borderRadius: "0px 0px 60px 60px", lineHeight: "81px" }}
-                  onClick={() => {
-                    document.body.style.overflow = "hidden";
-                    setPreviewInfo({
-                      preview: true,
-                      url: item.url,
-                    });
-                  }}
                 >
                   {props.dict.clickToPlay}
                 </div>