feat(material-poster) : link materials to Lunaris

components/public/material-poster.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import Link from "next/link";
 import { useRef, type PointerEvent } from "react";
 
 import type {
@@ -60,6 +61,7 @@ export function MaterialPoster({
   topColors,
   bottomColors,
   interactive = false,
+  linkMaterials = false,
   onArtworkMove,
   className,
   bleeding = [],
@@ -71,6 +73,7 @@ export function MaterialPoster({
   topColors: [string, string];
   bottomColors: [string, string];
   interactive?: boolean;
+  linkMaterials?: boolean;
   onArtworkMove?: (offset: { x: number; y: number }) => void;
   className?: string;
   artworkScale: number;
@@ -214,16 +217,34 @@ export function MaterialPoster({
         <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>MATERIALS</h2>
         <p className="mt-[1%] text-[4.5cqw] leading-none">LV.90</p>
         <div className="mt-[5%] grid grid-cols-8 gap-[1.2%]">
-          {materials.map((material, index) => (
-            <div key={`${material.key}-${index}`} className="aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10">
-              <div className="flex h-[68%] items-center justify-center rounded-br-[1.3cqw] bg-[#c1c1c1] p-[8%]">
-                {material.imageUrl ? <Image src={material.imageUrl} alt="" width={192} height={192} quality={POSTER_IMAGE_QUALITY} className="size-full object-contain" /> : null}
+          {materials.map((material, index) => {
+            const materialCard = (
+              <>
+                <div className="flex h-[68%] items-center justify-center rounded-br-[1.3cqw] bg-[#c1c1c1] p-[8%]">
+                  {material.imageUrl ? <Image src={material.imageUrl} alt="" width={192} height={192} quality={POSTER_IMAGE_QUALITY} className="size-full object-contain" /> : null}
+                </div>
+                <div className="flex h-[32%] items-center justify-center px-[4%] text-center text-[2.2cqw] leading-none">
+                  <span className="whitespace-nowrap text-[1.8cqw]">×{material.amount.toLocaleString("en-US")}</span>
+                </div>
+              </>
+            );
+            const className = "aspect-[0.72] overflow-hidden rounded-[1.3cqw] bg-black/95 ring-1 ring-white/10";
+
+            return linkMaterials ? (
+              <Link
+                key={`${material.key}-${index}`}
+                href={`https://lunaris.moe/material/${encodeURIComponent(material.key)}`}
+                className={className}
+                aria-label={`เปิดข้อมูล ${material.name} บน Lunaris`}
+              >
+                {materialCard}
+              </Link>
+            ) : (
+              <div key={`${material.key}-${index}`} className={className}>
+                {materialCard}
               </div>
-              <div className="flex h-[32%] items-center justify-center px-[4%] text-center text-[2.2cqw] leading-none">
-                <span className="whitespace-nowrap text-[1.8cqw]">×{material.amount.toLocaleString("en-US")}</span>
-              </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
     </div>