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

Move element colors to team member sections

Browse Source
This commit is contained in:
gunshiz
2026-09-01 15:10:49 +07:00 Unverified
parent e0312b4598
commit e311ba21bf
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/teams/[teamId]/image/route.tsx
+4 -3
View File
@@ -4,6 +4,7 @@ import sharp from "sharp";
import { elementBackgroundColor } from "@/lib/catalog/element";
import { rarityGradient } from "@/lib/catalog/rarity";
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
import { getCachedPublicTeamExport } from "@/lib/cache/public";
import { imageContentDisposition } from "@/lib/guides/export-image";
@@ -103,17 +104,17 @@ export async function GET(
const damage = Number(member.damage);
const percent = total > 0 ? (damage / total) * 100 : 0;
return (
<div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14 }}>
<div key={member.position} style={{ display: "flex", alignItems: "center", gap: 14, borderRadius: 16, background: elementBackgroundColor(member.character.element), padding: 6 }}>
{memberAssets[index].character ? (
<img
src={memberAssets[index].character}
alt=""
width={78}
height={78}
style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), objectFit: "cover" }}
style={{ borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), objectFit: "cover" }}
/>
) : (
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: elementBackgroundColor(member.character.element), color: "#b9b9c2", fontSize: 30 }}>
<div style={{ display: "flex", width: 78, height: 78, alignItems: "center", justifyContent: "center", borderRadius: 16, border: "2px solid #ffffff2a", background: rarityGradient(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity), color: "#b9b9c2", fontSize: 30 }}>
{member.character.name.slice(0, 1)}
</div>
)}
components/public/team-search.tsx
+10 -3
View File
@@ -11,6 +11,7 @@ import { Kbd } from "@/components/ui/kbd";
import { Separator } from "@/components/ui/separator";
import { elementBackgroundColor } from "@/lib/catalog/element";
import { rarityGradientClass } from "@/lib/catalog/rarity";
import { isCustomTravelerKey } from "@/lib/catalog/travelers";
import type { PublicGuide } from "@/lib/guides/queries";
import { cn } from "@/lib/utils";
@@ -75,11 +76,17 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
<CardContent className="flex flex-col gap-4">
<div className="grid grid-cols-4 gap-1 sm:gap-3">
{team.members.map((member) => (
<div key={member.position} className="min-w-0 text-center">
<div
key={member.position}
className="min-w-0 rounded-lg p-1 text-center sm:p-2"
style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
>
<div className="grid grid-cols-3 gap-2">
<div
className="relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg"
style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
className={cn(
"relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted",
rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity),
)}
>
<Image
src={member.character.imageUrl}