UPDATE: change UX

src/components/avatarInfo/index.tsx

@@ -176,7 +176,6 @@ export default function AvatarInfo() {
                                                         onClick={() => {
                                                             const newSpValue = Math.ceil(avatars[avatarSelected?.id || ""]?.sp_max / 2);
                                                             const newAvatar = { ...avatars[avatarSelected?.id || ""], sp_value: newSpValue }
-                                                            console.log(newAvatar)
                                                             setAvatar(newAvatar)
                                                         }}
                                                     >

src/components/card/relicCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import useRelicMakerStore from "@/stores/relicMakerStore";
 import useUserDataStore from "@/stores/userDataStore";
 import Image from "next/image";
 import { useMemo } from "react";
@@ -96,6 +97,7 @@ const getRarityName = (slot: string) => {
 };
 export default function RelicCard({ slot, avatarId }: RelicCardProps) {
     const { avatars } = useUserDataStore()
+    const { selectedRelicSlot } = useRelicMakerStore()
 
     const relicDetail = useMemo(() => {
         const avatar = avatars[avatarId];
@@ -115,12 +117,12 @@ export default function RelicCard({ slot, avatarId }: RelicCardProps) {
                     className="flex flex-col items-center cursor-pointer ">
                     <div
                         className={`
-                              relative w-24 h-24 rounded-full border-4 
+                              relative w-24 h-24 rounded-full
                               ${getRarityColor(relicDetail.relic_id.toString()[0])}
                               shadow-xl
                               flex items-center justify-center
-                              cursor-pointer hover:scale-105 transition-transform
-                              ring-4 ring-primary
+                              cursor-pointer transition-transform
+                              ${selectedRelicSlot === slot ? 'ring-5 ring-success scale-105' : 'ring-3 ring-primary'}
                             `}
                     >
                         <span>

src/components/monsterBar/ce.tsx

@@ -27,6 +27,13 @@ export default function CeBar() {
     const { ce_config, setCeConfig } = useUserDataStore()
     const { listMonster } = useMonsterStore()
     const { locale } = useLocaleStore()
+    const transI18n = useTranslations("DataPage")
+    const [showSearchStage, setShowSearchStage] = useState(false)
+    const [stageSearchTerm, setStageSearchTerm] = useState("")
+    const [stagePage, setStagePage] = useState(1)
+
+    const pageSize = 30
+
     const filteredMonsters = useMemo(() => {
         const newlistMonster = new Set<MonsterBasic>()
         for (const monster of listMonster) {
@@ -39,11 +46,6 @@ export default function CeBar() {
         }
         return Array.from(newlistMonster)
     }, [listMonster, locale, searchTerm]);
-    const transI18n = useTranslations("DataPage")
-    const [showSearchStage, setShowSearchStage] = useState(false)
-    const [stageSearchTerm, setStageSearchTerm] = useState("")
-    const [stagePage, setStagePage] = useState(1)
-    const pageSize = 30
 
     const stageList = useMemo(() => Object.values(Stage).map((stage) => ({
         id: stage.stage_id.toString(),

src/components/relicsInfo/index.tsx

@@ -17,6 +17,7 @@ export default function RelicsInfo() {
   const { avatarSelected } = useAvatarStore()
   const {
     setSelectedRelicSlot,
+    selectedRelicSlot,
     setSelectedMainStat,
     setSelectedRelicSet,
     setSelectedRelicLevel,
@@ -157,7 +158,11 @@ export default function RelicsInfo() {
                   <div key={index} className="relative group">
                     <div
                       onClick={() => {
-                        handlerChangeRelic(item)
+                        if (item === selectedRelicSlot) {
+                          setSelectedRelicSlot("")
+                        } else {
+                          setSelectedRelicSlot(item)
+                        }
                       }}
                       className="cursor-pointer"
                     >
@@ -201,6 +206,29 @@ export default function RelicsInfo() {
                   </div>
                 ))}
               </div>
+              <div className="grid grid-cols-2 gap-2 mt-10">
+                <button
+                  disabled={!selectedRelicSlot}
+                  onClick={() => {
+                    handlerChangeRelic(selectedRelicSlot)
+                  }}
+                  className="btn btn-info"
+                >
+                    {transI18n("changeRelic")}
+                </button>
+                <button
+                  disabled={!selectedRelicSlot}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (window.confirm(`${transI18n("deleteRelicConfirm")} ${selectedRelicSlot}?`)) {
+                      handlerDeleteRelic(selectedRelicSlot)
+                    }
+                  }}
+                  className="btn btn-error"
+                >
+                    {transI18n("deleteRelic")}
+                </button>
+              </div>
             </div>
           </div>
 

src/components/skillsInfo/index.tsx

@@ -130,7 +130,6 @@ export default function SkillsInfo() {
         if (!status && traceLink?.[avatarSelected?.baseType || ""]?.[skillSelected || ""]) {
             traceLink[avatarSelected?.baseType || ""][skillSelected || ""].forEach((pointId) => {
                 if (avatarSkillTree?.[pointId]?.["1"]) {
-                    console.log(avatarSkillTree?.[pointId]?.["1"].PointID)
                     newData.data.skills[avatarSkillTree?.[pointId]?.["1"].PointID] = 0
                 }
             })