From 12634fab0aa0bb09758598d25528e4d3972eb174 Mon Sep 17 00:00:00 2001
From: AzenKain <doduykhanh344@gmail.com>
Date: Sun, 1 Feb 2026 19:16:37 +0700
Subject: [PATCH] UPDATE: NEw ui

---
 public/data/rank_icon.json            | 24 ++++-----
 src/components/showcaseCard/index.tsx | 75 ++++++++++++++++++++-------
 2 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/public/data/rank_icon.json b/public/data/rank_icon.json
index 62a9f9d..451ab46 100644
--- a/public/data/rank_icon.json
+++ b/public/data/rank_icon.json
@@ -408,20 +408,20 @@
     "https://starrail.honeyhunterworld.com/img/eidolon/vincit-omnia-veritas-eidolon_icon_small.webp"
   ],
   "1306": [
-    "https://starrail.honeyhunterworld.com/img/eidolon/suspension-of-disbelief-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/purely-fictitious-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/pipedream-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/life-is-a-gamble-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/parallax-truth-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/narrative-polysemy-eidolon-2_icon_small.webp"
+    "https://starrail.honeyhunterworld.com/img/eidolon/suspension-of-disbelief-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/purely-fictitious-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/pipedream-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/life-is-a-gamble-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/parallax-truth-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/narrative-polysemy-eidolon_icon_small.webp"
   ],
   "1307": [
-    "https://starrail.honeyhunterworld.com/img/eidolon/seven-pillars-of-wisdom-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/weep-not-for-me-my-lamb-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/as-above-so-below-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/in-tears-we-gift-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/linnutee-flyway-eidolon-2_icon_small.webp",
-    "https://starrail.honeyhunterworld.com/img/eidolon/pantheon-merciful-masses-pitiful-eidolon-2_icon_small.webp"
+    "https://starrail.honeyhunterworld.com/img/eidolon/seven-pillars-of-wisdom-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/weep-not-for-me-my-lamb-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/as-above-so-below-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/in-tears-we-gift-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/linnutee-flyway-eidolon_icon_small.webp",
+    "https://starrail.honeyhunterworld.com/img/eidolon/pantheon-merciful-masses-pitiful-eidolon_icon_small.webp"
   ],
   "1308": [
     "https://starrail.honeyhunterworld.com/img/eidolon/silenced-sky-spake-sooth-eidolon_icon_small.webp",
diff --git a/src/components/showcaseCard/index.tsx b/src/components/showcaseCard/index.tsx
index b10e6c7..10a9a08 100644
--- a/src/components/showcaseCard/index.tsx
+++ b/src/components/showcaseCard/index.tsx
@@ -59,7 +59,6 @@ export default function ShowCaseInfo() {
       });
   }, [avatarSelected, locale, transI18n]);
 
-
   useEffect(() => {
     if (!avatarSelected?.id) return;
     const fac = new FastAverageColor();
@@ -570,30 +569,68 @@ export default function ShowCaseInfo() {
               }}
             >
 
-              <div className="absolute top-4 left-4">
+              <div className="absolute top-4 left-3">
                 {avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
-                  <div className="flex flex-col">
+                  <div className="flex flex-col items-center gap-2 py-2">
                     {avatarInfo?.RankIcon?.map((src, index) => {
                       const isActive = avatarData?.data?.rank > index;
-
                       return (
-                        <div key={index} className="relative my-1 flex rounded-full">
-                          <NextImage
-                            src={src ?? null}
-                            alt="Rank Icon"
-                            width={50}
-                            height={50}
-                            className="h-auto w-12 transition-all duration-300 ease-in-out p-px rounded-full"
+                        <div
+                          key={index}
+                          className="relative flex items-center justify-center"
+                          style={{
+                            transition: "transform 0.3s ease, filter 0.3s ease",
+                          }}
+                        >
+                          
+                          {isActive && (
+                            <div
+                              className="absolute inset-0 rounded-full pointer-events-none"
+                              style={{
+                                background: "radial-gradient(circle, rgba(250,204,21,0.35) 0%, transparent 70%)",
+                                filter: "blur(6px)",
+                                zIndex: 0,
+                              }}
+                            />
+                          )}
+
+                          <div
+                            className="relative rounded-full p-[2.5px]"
                             style={{
-                              opacity: isActive ? 1 : 0.6,
-                              filter: isActive
-                                ? 'grayscale(0) drop-shadow(0 0 8px rgba(255,215,0,0.5))'
-                                : 'grayscale(1)',
-                              border: '2px solid',
-                              borderColor: isActive ? '#facc15' : '#ffffff', // tailwind yellow-400 = #facc15
-                              boxShadow: isActive ? '0 0 10px rgba(250,204,21,0.5)' : undefined, // mimic shadow-yellow-400/50
+                              background: isActive
+                                ? "linear-gradient(135deg, #facc15, #f59e0b, #facc15)"
+                                : "rgba(255,255,255,0.15)",
+                              boxShadow: isActive
+                                ? "0 0 10px rgba(250,204,21,0.5), 0 0 24px rgba(250,204,21,0.2)"
+                                : "0 2px 6px rgba(0,0,0,0.4)",
+                              transition: "background 0.3s ease, box-shadow 0.3s ease",
+                              zIndex: 1,
                             }}
-                          />
+                          >
+                            <div
+                              className="rounded-full overflow-hidden"
+                              style={{
+                                padding: "2px",
+                                background: "#1e2230",
+                              }}
+                            >
+                              <NextImage
+                                src={src ?? null}
+                                alt="Rank Icon"
+                                width={48}
+                                height={48}
+                                className="block rounded-full object-cover"
+                                style={{
+                                  width: "44px",
+                                  height: "44px",
+                                  filter: isActive
+                                    ? "grayscale(0) brightness(1.05) saturate(1.1)"
+                                    : "grayscale(0.7) brightness(0.55)",
+                                  transition: "filter 0.3s ease",
+                                }}
+                              />
+                            </div>
+                          </div>
                         </div>
                       );
                     })}