polaris-task-force/src/components/frontend/account/RibbonRack.tsx

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.type === "ribbon" && 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 max-h-6.75 hover:scale-110 shadow-black shadow-xs hover:shadow-xl 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>
  );
};