38 lines
822 B
TypeScript
38 lines
822 B
TypeScript
import { BADGES } from "@repo/db";
|
|
import { cn } from "../helper/cn";
|
|
import * as React from "react";
|
|
|
|
const badgeImageMapping = {
|
|
[BADGES.P1]: "p-1.png",
|
|
[BADGES.P2]: "p-2.png",
|
|
[BADGES.P3]: "p-3.png",
|
|
[BADGES.D1]: "d-1.png",
|
|
[BADGES.D2]: "d-2.png",
|
|
[BADGES.D3]: "d-3.png",
|
|
[BADGES.DAY1]: "day-1-member.png",
|
|
[BADGES.V1Veteran]: "v1-veteran.png",
|
|
};
|
|
|
|
export const Badge = ({
|
|
badge,
|
|
className,
|
|
width = 80,
|
|
}: {
|
|
badge: BADGES;
|
|
className?: string;
|
|
width?: number;
|
|
}) => {
|
|
return (
|
|
<span className={cn("h-fit h-full p-1 flex justify-center items-center", className)}>
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_HUB_URL}/badges/${badgeImageMapping[badge]}`}
|
|
alt="Badge"
|
|
width={width}
|
|
height="auto"
|
|
style={{ maxWidth: `${width}px` }}
|
|
className="block h-auto w-auto"
|
|
/>
|
|
</span>
|
|
);
|
|
};
|