fix : use buzz style card
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user