astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : correct img size

Browse Source
This commit is contained in:
gunshiz
2026-10-01 00:31:34 +07:00 Unverified
parent 1b70567977
commit 43ed3aebe9
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/stygian-guide.tsx
+8 -8
View File
@@ -64,12 +64,12 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
if (item.kind === "character") {
const hasEquipment = Boolean(value.weapon || value.artifact);
return (
<div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "sm:p-2", teamLayout && !hasEquipment && item.constellationLevel === null && "aspect-square justify-center")}>
<div className={teamLayout && hasEquipment ? "flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:gap-2" : "flex flex-col gap-1"}>
<div className={cn("relative aspect-square overflow-hidden rounded-lg", teamLayout && hasEquipment && "sm:col-span-2 sm:row-span-2", rarityGradientClass(value.rarity))}>
<div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "w-full sm:p-2", teamLayout && hasEquipment && "sm:w-[164px]", teamLayout && !hasEquipment && "sm:w-[116px]", teamLayout && !hasEquipment && item.constellationLevel === null && "aspect-square justify-center")}>
<div className={teamLayout && hasEquipment ? "flex flex-col gap-1 sm:grid sm:grid-cols-[100px_40px] sm:gap-2" : "flex flex-col gap-1"}>
<div className={cn("relative aspect-square overflow-hidden rounded-lg", teamLayout && "sm:size-[100px]", teamLayout && hasEquipment && "sm:row-span-2", rarityGradientClass(value.rarity))}>
{value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes={teamLayout ? "(min-width: 640px) 128px, 25vw" : "128px"} className="object-contain" /> : null}
</div>
{hasEquipment ? <div className={teamLayout ? "grid grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1 sm:gap-2" : "grid grid-cols-2 gap-1"}>
{hasEquipment ? <div className={teamLayout ? "grid grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1 sm:gap-2 sm:self-center" : "grid grid-cols-2 gap-1"}>
{value.weapon ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.weapon.rarity))}><Image src={value.weapon.imageUrl} alt={value.weapon.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
{value.artifact ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
</div> : null}
@@ -86,7 +86,7 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
<div className={cn("relative aspect-square w-full overflow-hidden rounded-lg border", item.kind !== "element" && rarityGradientClass(value.rarity))}>
{value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes="80px" className="object-contain" style={item.kind === "element" && item.element ? { filter: elementIconFilter(item.element) } : undefined} /> : null}
</div>
<span className="max-w-20 truncate text-xs font-medium" title={value.name}>{value.name}</span>
<span className="max-w-[100px] truncate text-xs font-medium" title={value.name}>{value.name}</span>
</div>
);
}
@@ -124,15 +124,15 @@ function BossCard({ schedule, level, position, catalog }: { schedule: Schedule;
<section className="flex flex-col gap-3" aria-label={`Recommended teams for ${boss.name}`}>
<h3 className="font-heading text-lg font-semibold">Recommended team</h3>
{teams.length ? teams.map((team) => (
<div key={team.id} className="grid w-full grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:w-fit sm:grid-cols-[repeat(4,minmax(0,7.5rem))] sm:gap-3">
<div key={team.id} className="grid w-full grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:flex sm:w-fit sm:flex-wrap sm:gap-3">
{team.items.slice(0, 4).map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} teamLayout />)}
{Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-square rounded-lg border border-dashed bg-muted/30" aria-hidden="true" />)}
{Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-square w-full rounded-lg border border-dashed bg-muted/30 sm:w-[116px]" aria-hidden="true" />)}
</div>
)) : <p className="text-sm text-muted-foreground">No team recommendations yet.</p>}
</section>
<section className="flex flex-col gap-3" aria-label={`Recommended units for ${boss.name}`}>
<h3 className="font-heading text-lg font-semibold">Recommended unit</h3>
{units.length ? <div className="grid grid-cols-[repeat(auto-fill,minmax(4rem,5rem))] gap-2">{units.map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} />)}</div> : <p className="text-sm text-muted-foreground">No unit recommendations yet.</p>}
{units.length ? <div className="grid grid-cols-[repeat(auto-fill,minmax(5rem,6.25rem))] gap-2">{units.map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} />)}</div> : <p className="text-sm text-muted-foreground">No unit recommendations yet.</p>}
</section>
</div>
</CardContent>