77 lines
5.5 KiB
TypeScript
77 lines
5.5 KiB
TypeScript
import Image from "next/image";
|
|
import { UserRoundIcon } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
const steps = [
|
|
{ title: "1. เลือกรายการ", description: "เลือกทีม อาวุธ หรือกลุ่มดาวที่ต้องการคำนวณ" },
|
|
{ title: "2. ชำระเงิน", description: "ตรวจสอบยอด สแกน PromptPay และส่งสลิป" },
|
|
{ title: "3. รับผลใน Ticket", description: "ติดตามคำขอและพูดคุยเรื่องผลลัพธ์ใน Ticket ของคุณ" },
|
|
];
|
|
|
|
const sampleMembers = [
|
|
{ name: "ตัวละคร A", damage: "40,000", share: "40.00%" },
|
|
{ name: "ตัวละคร B", damage: "30,000", share: "30.00%" },
|
|
{ name: "ตัวละคร C", damage: "20,000", share: "20.00%" },
|
|
{ name: "ตัวละคร D", damage: "10,000", share: "10.00%" },
|
|
];
|
|
|
|
function CommissionTeamPreview() {
|
|
return <Card>
|
|
<CardHeader>
|
|
<CardTitle>ตัวอย่างทีม 4 ตัวละคร</CardTitle>
|
|
<CardDescription>โรเทชั่น 20 วิ · ข้อมูลสมมติสำหรับดูรูปแบบผลลัพธ์</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="grid grid-cols-4 gap-1 sm:gap-3">
|
|
{sampleMembers.map((member) => <div key={member.name} className="min-w-0 rounded-lg bg-muted/50 p-1 text-center sm:p-2">
|
|
<div className="flex flex-col gap-2 sm:grid sm:grid-cols-3">
|
|
<div className="flex aspect-square items-center justify-center rounded-lg bg-accent sm:col-span-2 sm:row-span-2"><UserRoundIcon className="size-8 text-muted-foreground" aria-hidden="true" /></div>
|
|
<div className="grid grid-cols-2 gap-1 sm:col-span-1 sm:row-span-2 sm:grid-cols-1">
|
|
<div className="flex aspect-square items-center justify-center rounded-md border bg-card"><Image src="/icon/nav/Weapon.png" alt="" width={24} height={24} className="size-5 object-contain opacity-60 sm:size-6" /></div>
|
|
<div className="flex aspect-square items-center justify-center rounded-md border bg-card"><Image src="/icon/nav/Artifact.webp" alt="" width={24} height={24} className="size-5 object-contain opacity-60 sm:size-6" /></div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex items-center justify-center gap-1"><Badge variant="secondary">C0</Badge><Badge variant="secondary">R1</Badge></div>
|
|
<p className="mt-1 truncate text-xs font-medium sm:text-sm">{member.name}</p>
|
|
<p className="text-xs font-semibold sm:text-sm">{member.damage}</p>
|
|
<p className="text-xs text-muted-foreground">{member.share}</p>
|
|
</div>)}
|
|
</div>
|
|
<Separator />
|
|
<div className="flex items-end justify-between">
|
|
<div><p className="text-sm text-muted-foreground">ดาเมจรวม</p><p className="font-semibold">100,000</p></div>
|
|
<div className="text-right"><p className="text-sm text-muted-foreground">DPS</p><p className="text-3xl font-semibold text-primary">5,000</p></div>
|
|
</div>
|
|
<p className="rounded-lg bg-muted p-3 text-sm leading-6">ตัวอย่างลำดับการใช้สกิลและคำอธิบายทีม</p>
|
|
</CardContent>
|
|
</Card>;
|
|
}
|
|
|
|
export function CommissionIntro() {
|
|
return <section className="flex flex-col gap-6" aria-labelledby="commission-how-it-works">
|
|
<div>
|
|
<h2 id="commission-how-it-works" className="font-heading text-2xl font-semibold">ขอคำนวณแบบที่ต้องการ</h2>
|
|
<p className="mt-2 text-muted-foreground">เลือกได้ทั้งจัดทีม เปรียบเทียบอาวุธ และเปรียบเทียบกลุ่มดาว โดยเห็นยอดก่อนชำระเงิน</p>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
{steps.map((step) => <Card key={step.title} size="sm">
|
|
<CardHeader><CardTitle>{step.title}</CardTitle><CardDescription>{step.description}</CardDescription></CardHeader>
|
|
</Card>)}
|
|
</div>
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<Card>
|
|
<CardHeader><CardTitle>ราคาเริ่มต้น</CardTitle><CardDescription>ระบบคำนวณยอดรวมจากรายการที่เลือก</CardDescription></CardHeader>
|
|
<CardContent className="flex flex-col gap-3 text-sm">
|
|
<p className="flex justify-between gap-3"><span>จัดทีม 4 ตัวละคร</span><strong>฿100 ต่อทีม</strong></p>
|
|
<p className="flex justify-between gap-3"><span>เปรียบเทียบอาวุธ</span><strong>฿20 ต่ออาวุธ</strong></p>
|
|
<p className="flex justify-between gap-3"><span>เปรียบเทียบกลุ่มดาว</span><strong>฿20 ต่อระดับ</strong></p>
|
|
<p className="border-t pt-3 text-muted-foreground">หากไม่เลือกทีม จะมีค่าบริการพื้นฐาน ฿100</p>
|
|
</CardContent>
|
|
</Card>
|
|
<CommissionTeamPreview />
|
|
</div>
|
|
</section>;
|
|
}
|