UPDATE: New ui

src/components/skillsInfo/skillDescription.tsx

@@ -1,5 +1,6 @@
 import { getLocaleName, replaceByParam } from "@/helper";
 import { AvatarStore, SkillDetail, SkillTreePoint } from "@/types";
+import ExtraEffectList from "../extraInfo";
 
 export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
     skill: SkillDetail,
@@ -12,8 +13,8 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
     const descHtml = getLocaleName(locale, skill.Desc) || getLocaleName(locale, skill.SimpleDesc);
 
     const extraList = Object.values(skill.Extra).length > 0
-        ? Object.values(skill.Extra)
-        : Object.values(skill?.SimpleExtra || {});
+        ? skill.Extra
+        : skill?.SimpleExtra || {};
 
     return (
         <div className="flex flex-col gap-2">
@@ -32,28 +33,9 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
                 />
             </div>
 
-            {extraList.map((extra) => (
-                <div
-                    key={extra.ID}
-                    className="mt-3 pl-3 border-l-2 border-primary/30 bg-primary/5 py-2 rounded-r-sm"
-                >
-                    <div className="flex items-center gap-2 mb-1">
-                        <span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
-                            Extra Effect
-                        </span>
-                        <span className="text-sm font-semibold text-primary/80">
-                            {getLocaleName(locale, extra.Name)}
-                        </span>
-                    </div>
-
-                    <div
-                        className="text-sm leading-relaxed opacity-90"
-                        dangerouslySetInnerHTML={{
-                            __html: replaceByParam(getLocaleName(locale, extra.Desc), extra.Param)
-                        }}
-                    />
-                </div>
-            ))}
+            {Object.keys(extraList).length > 0 && (
+                <ExtraEffectList extras={extraList} locale={locale} />
+            )}
         </div>
     );
 };