66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
|
|
import { DownloadIcon } from "lucide-react";
|
|
|
|
|
|
import { TakumiImageExport } from "@/components/public/takumi-image-export";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import type { PublicGuide } from "@/lib/guides/queries";
|
|
|
|
type WeaponGroup = PublicGuide["weaponGroups"][number];
|
|
export function WeaponImageExport({
|
|
guide,
|
|
group,
|
|
conditionIndex,
|
|
}: {
|
|
guide: PublicGuide;
|
|
group: WeaponGroup;
|
|
conditionIndex: number;
|
|
}) {
|
|
const conditionLabel = group.name || `Condition ${conditionIndex + 1}`;
|
|
const baseName = `${guide.name}-Weapon-${conditionLabel}`;
|
|
const metricOptions = ([
|
|
["overallPercent", "Overall Damage"],
|
|
["personalPercent", "Personal Damage"],
|
|
] as const).filter(([metric]) =>
|
|
group.rows.some((row) => row[metric] !== null),
|
|
);
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger render={<Button type="button" variant="outline" size="sm" />}>
|
|
<DownloadIcon data-icon="inline-start" />
|
|
ส่งออกภาพ
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>เลือกประเภทดาเมจ</DialogTitle>
|
|
<DialogDescription>
|
|
เลือกค่าที่ต้องการใช้สร้างภาพเปรียบเทียบอาวุธ
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{metricOptions.map(([metric, label]) => (
|
|
<TakumiImageExport
|
|
key={metric}
|
|
fileName={`${baseName}-${label}.png`}
|
|
width={1200}
|
|
buttonLabel={metric === "overallPercent" ? "ดาเมจทั้งทีม" : "ดาเมจส่วนตัว"}
|
|
template={{ kind: "weapon", data: { guide, group, metric, conditionLabel } }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|