feat : update

components/public/structured-guide.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { ChevronLeftIcon, CrownIcon, DownloadIcon, HourglassIcon, WineIcon } from "lucide-react";
+import { ChevronLeftIcon, DownloadIcon } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
@@ -342,9 +342,9 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                 <CardTitle className="text-2xl">Artifact Stats</CardTitle>
               </CardHeader>
               <CardContent className="grid grid-cols-3 p-0">
-                <ArtifactStat icon={HourglassIcon} label="Sands" values={profile.sands} />
-                <ArtifactStat icon={WineIcon} label="Goblet" values={profile.goblet} />
-                <ArtifactStat icon={CrownIcon} label="Circlet" values={profile.circlet} />
+                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
+                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
+                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
               </CardContent>
             </Card>
             {profile.substats.length ? (
@@ -410,10 +410,10 @@ function statLabel(value: string): string {
   return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
 }
 
-function ArtifactStat({ icon: Icon, label, values }: { icon: typeof HourglassIcon; label: string; values: string[] }) {
+function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
   return (
     <div className="flex min-w-0 flex-col items-center gap-3 border-r p-3 text-center last:border-r-0 sm:p-5">
-      <Icon className="size-10" aria-hidden="true" />
+      <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
       <p className="font-semibold">{label}</p>
       <Separator />
       <p className="text-sm leading-6 sm:text-base">{values.length ? values.map(statLabel).join(" > ") : "—"}</p>