fix(guide) : link catalog items correctly
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
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,
|
||||
@@ -313,6 +314,13 @@ function metric(value: string | null) {
|
||||
: `${Number(value).toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
|
||||
}
|
||||
|
||||
function lunarisItemUrl(
|
||||
kind: "character" | "weapon" | "artifact",
|
||||
key: string,
|
||||
): string {
|
||||
return `https://lunaris.moe/${kind}/${encodeURIComponent(key)}`;
|
||||
}
|
||||
|
||||
function WeaponSection({ guide }: { guide: PublicGuide }) {
|
||||
return <WeaponSectionContent guide={guide} showExportActions />;
|
||||
}
|
||||
@@ -435,7 +443,12 @@ function WeaponSectionContent({
|
||||
: "md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
<a
|
||||
href={lunarisItemUrl("weapon", row.weapon.key)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabIndex={exporting ? -1 : undefined}
|
||||
aria-label={`เปิดข้อมูลอาวุธ ${row.weapon.name} บน Lunaris`}
|
||||
className={cn(
|
||||
"flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white",
|
||||
useCompactExportGrid
|
||||
@@ -480,7 +493,7 @@ function WeaponSectionContent({
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-around bg-white py-5 text-black",
|
||||
@@ -719,7 +732,12 @@ function ArtifactSectionContent({
|
||||
)}
|
||||
>
|
||||
<div className="flex -space-x-3">
|
||||
<div
|
||||
<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",
|
||||
@@ -734,9 +752,19 @@ function ArtifactSectionContent({
|
||||
sizes="(min-width: 640px) 4rem, 3.5rem"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
{!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 ? (
|
||||
<div
|
||||
<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",
|
||||
@@ -751,7 +779,12 @@ function ArtifactSectionContent({
|
||||
sizes="(min-width: 640px) 4rem, 3.5rem"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
{!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>
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -1180,16 +1213,7 @@ function ExtraSectionContent({
|
||||
<Card
|
||||
key={row.id}
|
||||
className="overflow-hidden py-0"
|
||||
style={
|
||||
{
|
||||
backgroundColor: row.backgroundColor ?? undefined,
|
||||
color: row.textColor ?? undefined,
|
||||
"--tw-prose-body": row.textColor ?? undefined,
|
||||
"--tw-prose-bold": row.textColor ?? undefined,
|
||||
"--tw-prose-headings": row.textColor ?? undefined,
|
||||
"--tw-prose-links": row.textColor ?? undefined,
|
||||
} as CSSProperties
|
||||
}
|
||||
style={row.backgroundColor ? { backgroundColor: row.backgroundColor } : undefined}
|
||||
>
|
||||
{row.imageUrl ? (
|
||||
<div
|
||||
@@ -1212,7 +1236,15 @@ function ExtraSectionContent({
|
||||
{row.catalogItems.length ? (
|
||||
<CardContent className="grid grid-cols-2 gap-2 pt-5">
|
||||
{row.catalogItems.map((item) => (
|
||||
<div key={`${item.kind}:${item.key}`} className="flex min-w-0 items-center gap-2 rounded-lg border bg-background/80 p-2">
|
||||
<a
|
||||
key={`${item.kind}:${item.key}`}
|
||||
href={lunarisItemUrl(item.kind, item.key)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
tabIndex={exporting ? -1 : undefined}
|
||||
aria-label={`เปิดข้อมูล ${item.name} บน Lunaris`}
|
||||
className="flex min-w-0 items-center gap-2 rounded-lg border bg-background/80 p-2 outline-none hover:bg-background focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
{item.imageUrl ? (
|
||||
<div className={cn("relative size-12 shrink-0 overflow-hidden rounded-md", rarityGradientClass(item.rarity))}>
|
||||
<Image src={item.imageUrl} alt="" fill className="object-contain" />
|
||||
@@ -1222,13 +1254,14 @@ function ExtraSectionContent({
|
||||
<p className="truncate text-sm font-medium">{item.name}</p>
|
||||
{!item.available ? <Badge variant="secondary">ไม่พบรายการ</Badge> : null}
|
||||
</div>
|
||||
</div>
|
||||
<ArrowUpRightIcon aria-hidden="true" className="ml-auto shrink-0" />
|
||||
</a>
|
||||
))}
|
||||
</CardContent>
|
||||
) : null}
|
||||
<CardHeader className="pt-5">
|
||||
<CardTitle>{row.heading}</CardTitle>
|
||||
<CardDescription style={{ color: row.textColor ?? undefined }}>
|
||||
<CardDescription>
|
||||
<RichTextContent html={normalizeExtraRichText(row.body, row.highlights)} />
|
||||
</CardDescription>
|
||||
{row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
|
||||
|
||||
Reference in New Issue
Block a user