fix(team-calc) : update artifact card layout
This commit is contained in:
@@ -146,7 +146,7 @@ function TeamCard({
|
|||||||
tabIndex={exporting ? -1 : undefined}
|
tabIndex={exporting ? -1 : undefined}
|
||||||
aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
|
aria-label={`เปิดข้อมูลอาวุธ ${member.weapon.name} บน Lunaris`}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none sm:col-span-2",
|
"relative col-span-2 aspect-square scale-110 overflow-hidden rounded-md bg-muted outline-none",
|
||||||
rarityGradientClass(member.weapon.rarity),
|
rarityGradientClass(member.weapon.rarity),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -167,56 +167,63 @@ function TeamCard({
|
|||||||
) : (
|
) : (
|
||||||
<div className="col-span-2 aspect-square rounded-md border bg-muted" />
|
<div className="col-span-2 aspect-square rounded-md border bg-muted" />
|
||||||
)}
|
)}
|
||||||
{member.artifact ? (
|
<div
|
||||||
<Link
|
className={cn(
|
||||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
|
"col-span-2 grid",
|
||||||
target="_blank"
|
member.secondArtifact && "w-[150%] grid-cols-3 gap-2",
|
||||||
rel="noreferrer"
|
)}
|
||||||
tabIndex={exporting ? -1 : undefined}
|
>
|
||||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
|
{member.artifact ? (
|
||||||
className={cn(
|
<Link
|
||||||
"relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
|
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.artifact.key)}`}
|
||||||
rarityGradientClass(member.artifact.rarity),
|
target="_blank"
|
||||||
)}
|
rel="noreferrer"
|
||||||
>
|
tabIndex={exporting ? -1 : undefined}
|
||||||
<Image
|
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.artifact.name} บน Lunaris`}
|
||||||
src={member.artifact.imageUrl}
|
className={cn(
|
||||||
alt={member.artifact.name}
|
"relative col-span-2 aspect-square scale-110 overflow-hidden rounded-md bg-muted",
|
||||||
fill
|
rarityGradientClass(member.artifact.rarity),
|
||||||
loading={exporting ? "eager" : undefined}
|
)}
|
||||||
className="object-contain p-1"
|
>
|
||||||
/>
|
<Image
|
||||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
src={member.artifact.imageUrl}
|
||||||
<ArrowUpRightIcon aria-hidden="true" />
|
alt={member.artifact.name}
|
||||||
</Kbd>
|
fill
|
||||||
</Link>
|
loading={exporting ? "eager" : undefined}
|
||||||
) : (
|
className="object-contain p-1"
|
||||||
<div className="aspect-square rounded-md border bg-muted" />
|
/>
|
||||||
)}
|
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||||
{member.secondArtifact ? (
|
<ArrowUpRightIcon aria-hidden="true" />
|
||||||
<Link
|
</Kbd>
|
||||||
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
|
</Link>
|
||||||
target="_blank"
|
) : (
|
||||||
rel="noreferrer"
|
<div className="col-span-2 aspect-square rounded-md border bg-muted" />
|
||||||
tabIndex={exporting ? -1 : undefined}
|
)}
|
||||||
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
|
{member.secondArtifact ? (
|
||||||
className={cn(
|
<Link
|
||||||
"relative aspect-square scale-110 overflow-hidden rounded-md bg-muted",
|
href={`https://lunaris.moe/artifact/${encodeURIComponent(member.secondArtifact.key)}`}
|
||||||
rarityGradientClass(member.secondArtifact.rarity),
|
target="_blank"
|
||||||
)}
|
rel="noreferrer"
|
||||||
>
|
tabIndex={exporting ? -1 : undefined}
|
||||||
<Image
|
aria-label={`เปิดข้อมูลอาร์ติแฟกต์ ${member.secondArtifact.name} บน Lunaris`}
|
||||||
src={member.secondArtifact.imageUrl}
|
className={cn(
|
||||||
alt={member.secondArtifact.name}
|
"relative col-span-2 col-start-2 row-start-1 aspect-square scale-110 overflow-hidden rounded-md bg-muted",
|
||||||
fill
|
rarityGradientClass(member.secondArtifact.rarity),
|
||||||
loading={exporting ? "eager" : undefined}
|
)}
|
||||||
className="object-contain p-1"
|
>
|
||||||
/>
|
<Image
|
||||||
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
src={member.secondArtifact.imageUrl}
|
||||||
<ArrowUpRightIcon aria-hidden="true" />
|
alt={member.secondArtifact.name}
|
||||||
</Kbd>
|
fill
|
||||||
</Link>
|
loading={exporting ? "eager" : undefined}
|
||||||
) : null}
|
className="object-contain p-1"
|
||||||
|
/>
|
||||||
|
<Kbd className="absolute top-0 right-0 h-3 min-w-3 bg-transparent p-0 text-white">
|
||||||
|
<ArrowUpRightIcon aria-hidden="true" />
|
||||||
|
</Kbd>
|
||||||
|
</Link>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-2 truncate text-sm font-medium">
|
<p className="mt-2 truncate text-sm font-medium">
|
||||||
|
|||||||
Reference in New Issue
Block a user