feat : update

components/public/structured-guide.tsx

@@ -5,7 +5,6 @@ import type { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Kbd } from "@/components/ui/kbd";
 import {
   Card,
   CardAction,
@@ -26,7 +25,7 @@ import {
 import { SiteFooter } from "@/components/public/site-footer";
 import { SiteHeader } from "@/components/public/site-header";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
-import { TeamSearch } from "@/components/public/team-search";
+import { TeamArtifactIcon, TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import { ConstellationImage } from "@/components/public/constellation-image";
@@ -709,62 +708,14 @@ function ArtifactSectionContent({
                         index % 2 === 0 ? "bg-muted/60" : "bg-muted/20",
                       )}
                     >
-                      <div className="flex -space-x-3">
-                        <a
-                          href={lunarisItemUrl("artifact", row.first.key)}
-                          target="_blank"
-                          rel="noreferrer"
-                          tabIndex={exporting ? -1 : undefined}
-                          aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${row.first.name} บน Lunaris`}
-                          className={cn(
-                            "relative overflow-hidden rounded-lg border",
-                            exporting ? "size-16" : "size-14 sm:size-16",
-                            rarityGradientClass(row.first.rarity),
-                          )}
-                        >
-                          <Image
-                            src={row.first.imageUrl}
-                            alt={row.first.name}
-                            fill
-                            loading={exporting ? "eager" : undefined}
-                            sizes="(min-width: 640px) 4rem, 3.5rem"
-                            className="object-contain"
-                          />
-                          {!exporting ? (
-                            <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
-                              <ArrowUpRightIcon aria-hidden="true" />
-                            </Kbd>
-                          ) : null}
-                        </a>
-                        {row.second ? (
-                          <a
-                            href={lunarisItemUrl("artifact", row.second.key)}
-                            target="_blank"
-                            rel="noreferrer"
-                            tabIndex={exporting ? -1 : undefined}
-                            aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${row.second.name} บน Lunaris`}
-                            className={cn(
-                              "relative overflow-hidden rounded-lg border",
-                              exporting ? "size-16" : "size-14 sm:size-16",
-                              rarityGradientClass(row.second.rarity),
-                            )}
-                          >
-                            <Image
-                              src={row.second.imageUrl}
-                              alt={row.second.name}
-                              fill
-                              loading={exporting ? "eager" : undefined}
-                              sizes="(min-width: 640px) 4rem, 3.5rem"
-                              className="object-contain"
-                            />
-                            {!exporting ? (
-                              <Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
-                                <ArrowUpRightIcon aria-hidden="true" />
-                              </Kbd>
-                            ) : null}
-                          </a>
-                        ) : null}
-                      </div>
+                      <TeamArtifactIcon
+                        first={row.first}
+                        second={row.second}
+                        eager={exporting}
+                        linked={!exporting}
+                        sizes="(min-width: 640px) 4rem, 3.5rem"
+                        className={exporting ? "size-16 shrink-0" : "size-14 shrink-0 sm:size-16"}
+                      />
                       <div className="min-w-0 flex-1">
                         <p className="font-medium">
                           {artifactTierCount(row.second?.name ?? null)}{" "}

components/public/team-search.tsx

@@ -75,7 +75,7 @@ function ArtifactHalf({
   );
 }
 
-function TeamArtifactIcon({
+export function TeamArtifactIcon({
   first,
   second,
   eager = false,