feat : update

components/public/team-search.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState, type ReactNode } from "react";
 
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
@@ -175,10 +176,9 @@ function TeamExportImage({ team }: { team: Team }) {
             <div key={member.position} className="flex h-43.5 items-center gap-6 rounded-3xl p-3.5" style={{ backgroundColor: elementBackgroundColor(member.character.element) }}>
               <div className={cn("relative size-35 shrink-0 overflow-hidden rounded-3xl border-[3px] border-white/20", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
                 <Image src={member.character.imageUrl} alt="" fill loading="eager" sizes="140px" className="object-contain" />
-                <span className="absolute top-1.5 left-1.5 text-xl font-bold">C{member.constellation}</span>
               </div>
               <div className="grid w-44 shrink-0 grid-cols-2 gap-3">
-                {member.weapon ? <div className={cn("relative aspect-square min-w-0 scale-110 overflow-hidden rounded-2xl", rarityGradientClass(member.weapon.rarity))}><Image src={member.weapon.imageUrl} alt="" fill loading="eager" sizes="82px" className="object-contain p-1" /><span className="absolute top-1 left-1 text-base font-bold">R{member.refinement}</span></div> : null}
+                {member.weapon ? <div className={cn("relative aspect-square min-w-0 scale-110 overflow-hidden rounded-2xl", rarityGradientClass(member.weapon.rarity))}><Image src={member.weapon.imageUrl} alt="" fill loading="eager" sizes="82px" className="object-contain p-1" /></div> : null}
                 <TeamArtifactIcon
                   first={member.artifact}
                   second={member.secondArtifact}
@@ -188,7 +188,13 @@ function TeamExportImage({ team }: { team: Team }) {
                 />
               </div>
               <div className="flex min-w-0 flex-1 flex-col gap-3.5">
-                <div className="flex items-center justify-between gap-4"><span className="truncate text-[36px] font-semibold">{member.character.name}</span><span className="text-[36px]">{damage.toLocaleString()}</span></div>
+                <div className="flex items-center justify-between gap-4">
+                  <span className="flex min-w-0 items-baseline gap-3 text-[36px] font-semibold">
+                    <span className="truncate">{member.character.name}</span>
+                    <span className="shrink-0 text-[28px] text-[#f0c95f]">C{member.constellation}R{member.refinement}</span>
+                  </span>
+                  <span className="shrink-0 text-[36px]">{damage.toLocaleString()}</span>
+                </div>
                 <div className="flex items-center gap-5"><div className="h-11 flex-1 overflow-hidden rounded-xl bg-[#272730]"><div className="h-full rounded-xl bg-linear-to-r from-[#b7791f] to-[#f0b72f]" style={{ width: `${Math.max(2, Math.min(100, percent))}%` }} /></div><span className="w-28 text-right text-[34px] font-bold">{percent.toFixed(1)}%</span></div>
               </div>
             </div>
@@ -272,9 +278,6 @@ function TeamCard({
                     loading={exporting ? "eager" : undefined}
                     className="object-contain"
                   />
-                  <Kbd className="absolute top-0 left-0 bg-transparent text-white">
-                    C{member.constellation}
-                  </Kbd>
                 </div>
                 <div
                   className={cn(
@@ -303,9 +306,6 @@ function TeamCard({
                         loading={exporting ? "eager" : undefined}
                         className="object-contain p-1"
                       />
-                      <Kbd className="absolute top-0 left-0 h-4 min-w-4 whitespace-nowrap bg-transparent px-0.5 text-[9px] text-white">
-                        R{member.refinement}
-                      </Kbd>
                       <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
                         <ArrowUpRightIcon aria-hidden="true" />
                       </Kbd>
@@ -323,7 +323,11 @@ function TeamCard({
                   />
                 </div>
               </div>
-              <p className="mt-2 truncate text-sm font-medium">
+              <div className="mt-2 flex items-center justify-center gap-1">
+                <Badge variant="secondary">C{member.constellation}</Badge>
+                <Badge variant="secondary">R{member.refinement}</Badge>
+              </div>
+              <p className="mt-1 truncate text-sm font-medium">
                 {member.character.name}
               </p>
               <p className="text-sm font-semibold">