fix : use buzz style card
CI / Verify (push) Successful in 51s
CI / Build immutable images and deploy (push) Successful in 1m34s

This commit is contained in:
2026-08-30 07:18:07 +00:00 Unverified
parent 2f2cfb0274
commit b94ce3b640
3 changed files with 26 additions and 10 deletions
+11 -9
View File
@@ -9,7 +9,7 @@ import { Kbd } from "@/components/ui/kbd";
import { Separator } from "@/components/ui/separator";
import { SiteHeader } from "@/components/public/site-header";
import { LiveRefresh } from "@/components/live-refresh";
import { rarityGradientClass } from "@/lib/catalog/rarity";
import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
import type { PublicGuide } from "@/lib/guides/queries";
import { cn } from "@/lib/utils";
@@ -49,15 +49,17 @@ function WeaponSection({ guide }: { guide: PublicGuide }) {
return (
<section className="flex flex-col gap-6">
<header className="text-center"><p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p><h1 className="font-heading text-4xl font-semibold">Weapons</h1></header>
<div className="grid gap-3 lg:grid-cols-2">
<div className="grid gap-3">
{guide.weapons.map((row, index) => (
<Card key={row.id} size="sm" className={cn(rarityGradientClass(row.weapon.rarity))}>
<CardContent className="flex items-center gap-3">
<div className="relative size-16 shrink-0 overflow-hidden rounded-lg bg-black"><Image src={row.weapon.imageUrl} alt={row.weapon.name} fill className="object-contain" /></div>
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-4 rounded-lg bg-black p-3 text-white">
<p className="min-w-40 flex-1 font-semibold">{index + 1}. {row.weapon.name} R{row.refinement}</p>
{row.overallPercent ? <div className="text-right"><p className="text-xs text-white/70">ดาเมทโดยรวม</p><p className="text-2xl font-semibold">{metric(row.overallPercent)}</p></div> : null}
{row.personalPercent ? <div className="text-right"><p className="text-xs text-white/70">ดาเมทส่วนตัว</p><p className="text-2xl font-semibold">{metric(row.personalPercent)}</p></div> : null}
<Card key={row.id} size="sm" className="bg-white py-0">
<CardContent className="grid p-0 md:grid-cols-[minmax(0,3fr)_minmax(18rem,2fr)]">
<div className={cn("flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white md:rounded-br-[8rem] md:pr-16", rarityGradientClass(row.weapon.rarity))}>
<div className="relative size-20 shrink-0"><Image src={row.weapon.imageUrl} alt={row.weapon.name} fill className="object-contain" /></div>
<p className="truncate text-base font-semibold sm:text-lg">{index + 1}. {row.weapon.name} R{row.refinement}</p>
</div>
<div className="flex items-center justify-around gap-4 bg-white px-4 py-5 text-black">
{row.overallPercent ? <div className="flex-1 text-center"><p className={cn("text-4xl leading-none font-bold sm:text-5xl", rarityTextClass(row.weapon.rarity))}>{metric(row.overallPercent)}</p><p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p></div> : null}
{row.personalPercent ? <div className="flex-1 text-center"><p className={cn("text-4xl leading-none font-bold sm:text-5xl", rarityTextClass(row.weapon.rarity))}>{metric(row.personalPercent)}</p><p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p></div> : null}
</div>
</CardContent>
</Card>