added Badges to Dashboard, warning for full events

apps/hub/app/(app)/_components/Badges.tsx

@@ -1,7 +1,6 @@
-import { Badge } from "@repo/ui";
-
 import { Award } from "lucide-react";
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+import { Badge } from "../../_components/Badge/Badge";
 
 export const Badges = async () => {
 	const session = await getServerSession();
@@ -15,13 +14,11 @@ export const Badges = async () => {
 						<Award className="w-4 h-4" /> Verdiente Abzeichen
 					</span>
 				</h2>
-				{session.user.badges.map((badge) => {
-					return (
-						<div className="badge badge-primary badge-outline">
-							<Badge name={badge} />
-						</div>
-					);
-				})}
+				<div className="flex flex-wrap gap-2">
+					{session.user.badges.map((badge, i) => {
+						return <Badge name={badge} key={`${badge} - ${i}`} />;
+					})}
+				</div>
 			</div>
 		</div>
 	);