36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
import { RibbonDesign } from "@/components/admin/awards/RibbonDesigner";
|
|
import { RibbonViewer } from "@/components/frontend/account/RibbonViewer";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { Award } from "@/payload-types";
|
|
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
|
|
|
|
export const RibbonRack = ({ awards }: { awards: Award[] }) => {
|
|
return (
|
|
<div className="flex flex-row w-52 gap-1">
|
|
{awards
|
|
.filter((award) => award.ribbonDesign !== null)
|
|
.sort((a, b) => (b.experiencePoints ?? 0) - (a.experiencePoints ?? 0))
|
|
.map((award, key) => {
|
|
const ribbon = award.ribbonDesign as RibbonDesign;
|
|
return (
|
|
<Tooltip key={key}>
|
|
<TooltipTrigger className="w-full hover:scale-110 transition-transform">
|
|
<RibbonViewer ribbonDesign={ribbon} showRibbonOnly />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex flex-row items-center justify-between gap-3">
|
|
<span className="font-bold text-lg">{award.name}</span>
|
|
<span className="text-amber-400/75">{award.experiencePoints} XP</span>
|
|
</div>
|
|
<p className="opacity-75">
|
|
{convertLexicalToPlaintext({ data: award.description })}
|
|
</p>
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|