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

feat : create share function item with rareity bg

Browse Source
This commit is contained in:
gunshiz
2026-10-11 20:17:16 +07:00 Unverified
parent c84c691fe9
commit 99c129eb26
12 changed files with 185 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/stygian-guide.tsx
+12 -8
View File
@@ -4,6 +4,7 @@ import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { buttonVariants } from "@/components/ui/button";
import { CatalogItemImage } from "@/components/catalog-item-image";
import { TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { StygianBossTabs, StygianNavigation } from "@/components/stygian/stygian-navigation";
import {
@@ -11,7 +12,6 @@ import {
StygianBossTab,
} from "@/components/stygian/stygian-boss-display";
import { elementIconFilter } from "@/lib/catalog/element";
import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
import type { getCatalogOptions } from "@/lib/guides/queries";
import { stygianBossPositionLabels, stygianBossPositions, stygianLevels } from "@/lib/stygian/constants";
import type { getStygianSchedule } from "@/lib/stygian/repository";
@@ -52,12 +52,16 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
return (
<div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "w-full gap-2 sm:p-2")}>
<div className="flex flex-col gap-1">
<div className={cn("relative aspect-square overflow-hidden rounded-lg", characterRarityGradientClass(item.catalogKey, value.rarity))}>
{value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes={teamLayout ? "(min-width: 1280px) 128px, (min-width: 640px) 25vw, 50vw" : "128px"} className="object-contain" /> : null}
</div>
<CatalogItemImage
item={{ key: item.catalogKey ?? "", imageUrl: value.imageUrl, rarity: value.rarity }}
kind="character"
alt={value.name}
className="aspect-square rounded-lg"
sizes={teamLayout ? "(min-width: 1280px) 128px, (min-width: 640px) 25vw, 50vw" : "128px"}
/>
{hasEquipment ? <div className="grid grid-cols-2 gap-1">
{value.weapon ? <a href={`https://lunaris.moe/weapon/${encodeURIComponent(value.weapon.key)}`} target="_blank" rel="noreferrer" aria-label={`View ${value.weapon.name} on Lunaris`} title={value.weapon.name} className={cn("relative aspect-square overflow-hidden rounded-md border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", rarityGradientClass(value.weapon.rarity))}><Image src={value.weapon.imageUrl} alt={value.weapon.name} fill sizes={teamLayout ? "(min-width: 1280px) 64px, (min-width: 640px) 12vw, 25vw" : "64px"} className="object-contain p-1" /></a> : null}
{value.artifact ? <a href={`https://lunaris.moe/artifact/${encodeURIComponent(value.artifact.key)}`} target="_blank" rel="noreferrer" aria-label={`View ${value.artifact.name} on Lunaris`} title={value.artifact.name} className={cn("relative aspect-square overflow-hidden rounded-md border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes={teamLayout ? "(min-width: 1280px) 64px, (min-width: 640px) 12vw, 25vw" : "64px"} className="object-contain p-1" /></a> : null}
{value.weapon ? <a href={`https://lunaris.moe/weapon/${encodeURIComponent(value.weapon.key)}`} target="_blank" rel="noreferrer" aria-label={`View ${value.weapon.name} on Lunaris`} title={value.weapon.name} className="relative aspect-square overflow-hidden rounded-md border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"><CatalogItemImage item={value.weapon} kind="weapon" alt={value.weapon.name} className="absolute inset-0" imageClassName="p-1" sizes={teamLayout ? "(min-width: 1280px) 64px, (min-width: 640px) 12vw, 25vw" : "64px"} /></a> : null}
{value.artifact ? <a href={`https://lunaris.moe/artifact/${encodeURIComponent(value.artifact.key)}`} target="_blank" rel="noreferrer" aria-label={`View ${value.artifact.name} on Lunaris`} title={value.artifact.name} className="relative aspect-square overflow-hidden rounded-md border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"><CatalogItemImage item={value.artifact} kind="artifact" alt={value.artifact.name} className="absolute inset-0" imageClassName="p-1" sizes={teamLayout ? "(min-width: 1280px) 64px, (min-width: 640px) 12vw, 25vw" : "64px"} /></a> : null}
</div> : null}
</div>
{teamLayout ? item.constellationLevel !== null || value.weapon && value.refinement ? <div className="flex justify-center gap-1">
@@ -70,8 +74,8 @@ function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item;
return (
<div className="flex min-w-0 flex-col items-center gap-1 text-center">
{item.kind === "weapon" || item.kind === "artifact" ? (
<a href={`https://lunaris.moe/${item.kind}/${encodeURIComponent(item.catalogKey ?? "")}`} target="_blank" rel="noreferrer" aria-label={`View ${value.name} on Lunaris`} title={value.name} className={cn("relative aspect-square w-full overflow-hidden rounded-lg border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", rarityGradientClass(value.rarity))}>
{value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes="100px" className="object-contain" /> : null}
<a href={`https://lunaris.moe/${item.kind}/${encodeURIComponent(item.catalogKey ?? "")}`} target="_blank" rel="noreferrer" aria-label={`View ${value.name} on Lunaris`} title={value.name} className="relative aspect-square w-full overflow-hidden rounded-lg border transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
<CatalogItemImage item={{ key: item.catalogKey ?? "", imageUrl: value.imageUrl, rarity: value.rarity }} kind={item.kind} alt={value.name} className="absolute inset-0" sizes="100px" />
</a>
) : (
<div className="relative aspect-square w-full overflow-hidden rounded-lg border">