added Badges to Dashboard, warning for full events

apps/hub/app/_components/Badge/Badge.tsx

@@ -0,0 +1,37 @@
+import { BADGES } from "@repo/db";
+import P1 from "./p-1.png";
+import P2 from "./p-2.png";
+import P3 from "./p-3.png";
+import D1 from "./d-1.png";
+import D2 from "./d-2.png";
+import D3 from "./d-3.png";
+import DAY1 from "./day-1-member.png";
+import { cn } from "../../../helper/cn";
+
+const BadgeImage = {
+	[BADGES.P1]: P1,
+	[BADGES.P2]: P2,
+	[BADGES.P3]: P3,
+	[BADGES.D1]: D1,
+	[BADGES.D2]: D2,
+	[BADGES.D3]: D3,
+	[BADGES.DAY1]: DAY1,
+};
+
+export const Badge = ({
+	name,
+	className,
+}: {
+	name: BADGES;
+	className?: string;
+}) => {
+	const image = BadgeImage[name];
+
+	return (
+		<span
+			className={cn("badge badge-secondary badge-outline h-fit p-1", className)}
+		>
+			<img src={image.src} alt={name} width={100} />
+		</span>
+	);
+};