shared library hinzugefügt

apps/dispatch/app/_components/Audio/Audio.tsx

@@ -15,7 +15,7 @@ import {
 	ZapOff,
 } from "lucide-react";
 import { useAudioStore } from "_store/audioStore";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { ConnectionQuality } from "livekit-client";
 import { ROOMS } from "_data/livekitRooms";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";

apps/dispatch/app/_components/Badge/Badge.tsx

@@ -1,30 +0,0 @@
-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 "_helpers/cn";
-
-const BadgeImage = {
-	[BADGES.P1]: P1,
-	[BADGES.P2]: P2,
-	[BADGES.P3]: P3,
-	[BADGES.D1]: D1,
-	[BADGES.D2]: D2,
-	[BADGES.D3]: D3,
-	[BADGES.DAY1]: DAY1,
-	[BADGES.V1Veteran]: DAY1,
-};
-
-export const Badge = ({ name, className }: { name: BADGES; className?: string }) => {
-	const image = BadgeImage[name];
-
-	return (
-		<span className={cn("flex h-fit p-1", className)}>
-			<img src={image.src} alt={name} width={100} />
-		</span>
-	);
-};

apps/dispatch/app/_components/MicVolumeIndication.tsx

@@ -1,6 +1,5 @@
 "use client";
-
+import { cn } from "@repo/shared-components";
-import { cn } from "_helpers/cn";
 import { useEffect, useState } from "react";
 
 type MicrophoneLevelProps = {

apps/dispatch/app/_components/Select.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
 import SelectTemplate, { Props as SelectTemplateProps, StylesConfig } from "react-select";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import dynamic from "next/dynamic";
 import { CSSProperties } from "react";
 

apps/dispatch/app/_components/SmartPopup.tsx

@@ -1,4 +1,4 @@
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { RefAttributes, useCallback, useEffect, useImperativeHandle } from "react";
 import { createContext, Ref, useContext, useState } from "react";
 import { Popup, PopupProps, useMap } from "react-leaflet";

apps/dispatch/app/_components/customToasts/AdminMessage.tsx

@@ -1,6 +1,6 @@
 import { AdminMessage } from "@repo/db";
 import { BaseNotification } from "_components/customToasts/BaseNotification";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { TriangleAlert } from "lucide-react";
 import toast, { Toast } from "react-hot-toast";
 

apps/dispatch/app/_components/customToasts/BaseNotification.tsx

@@ -1,4 +1,4 @@
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 
 export const BaseNotification = ({
 	children,

apps/dispatch/app/_components/left/Chat.tsx

@@ -3,7 +3,7 @@ import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
 import { useLeftMenuStore } from "_store/leftMenuStore";
 import { useSession } from "next-auth/react";
 import { Fragment, useEffect, useState } from "react";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { asPublicUser } from "@repo/db";
 import { useQuery } from "@tanstack/react-query";
 import { getConnectedDispatcherAPI } from "_querys/dispatcher";

apps/dispatch/app/_components/left/Report.tsx

@@ -2,7 +2,7 @@
 import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { toast } from "react-hot-toast";
 import { useLeftMenuStore } from "_store/leftMenuStore";
 import { asPublicUser } from "@repo/db";

apps/dispatch/app/_components/left/SituationBoard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useLeftMenuStore } from "_store/leftMenuStore";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { ListCollapse, Plane } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { getMissionsAPI } from "_querys/missions";

apps/dispatch/app/_components/map/AircraftMarker.tsx

@@ -2,7 +2,7 @@ import { Marker, Polyline, useMap } from "react-leaflet";
 import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
 import { useMapStore } from "_store/mapStore";
 import { Fragment, useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { ChevronsRightLeft, House, MessageSquareText, Minimize2 } from "lucide-react";
 import { SmartPopup, calculateAnchor, useSmartPopup } from "_components/SmartPopup";
 import FMSStatusHistory, {

apps/dispatch/app/_components/map/MissionMarkers.tsx

@@ -3,7 +3,7 @@ import { DivIcon, LatLngExpression, Marker as LMarker, Popup as LPopup } from "l
 import { useMapStore } from "_store/mapStore";
 import { usePannelStore } from "_store/pannelStore";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { ClipboardList, Cross, House, Minimize2, SmartphoneNfc, PencilLine } from "lucide-react";
 import { calculateAnchor, SmartPopup, useSmartPopup } from "_components/SmartPopup";
 import { Mission, MissionState } from "@repo/db";

apps/dispatch/app/_components/map/_components/AircraftMarkerTabs.tsx

@@ -16,7 +16,7 @@ import { toast } from "react-hot-toast";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { editConnectedAircraftAPI } from "_querys/aircrafts";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { PersonIcon } from "@radix-ui/react-icons";
 import {
 	Ban,

apps/dispatch/app/_components/map/_components/MarkerCluster.tsx

@@ -5,7 +5,7 @@ import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { useMapStore } from "_store/mapStore";
 import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_helpers/fmsStatusColors";
 import { MISSION_STATUS_COLORS, MISSION_STATUS_TEXT_COLORS } from "_components/map/MissionMarkers";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { getMissionsAPI } from "_querys/missions";
 import { useEffect, useMemo, useState } from "react";

apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx

@@ -47,7 +47,7 @@ import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
 import { getOsmAddress } from "_querys/osm";
 import { hpgStateToFMSStatus } from "_helpers/hpgStateToFmsStatus";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 
 const Einsatzdetails = ({
 	mission,

apps/dispatch/app/_components/navbar/AdminPanel.tsx

@@ -1,11 +1,10 @@
 "use client";
 import { PublicUser } from "@repo/db";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { cn } from "_helpers/cn";
+import { cn, PenaltyDropdown } from "@repo/shared-components";
 import { getConnectedAircraftsAPI, kickAircraftAPI } from "_querys/aircrafts";
 import { getConnectedDispatcherAPI, kickDispatcherAPI } from "_querys/dispatcher";
 import { getLivekitRooms, kickLivekitParticipant } from "_querys/livekit";
-import { editUserAPI } from "_querys/user";
 import { ParticipantInfo } from "livekit-server-sdk";
 import {
 	Eye,
@@ -21,112 +20,6 @@ import {
 import { ReactNode, useRef, useState } from "react";
 import toast from "react-hot-toast";
 
-const PenaltyDropdown = ({
-	onClick,
-	btnClassName,
-	showDatePicker,
-	btnTip,
-	Icon,
-}: {
-	onClick: (data: { reason: string; until: Date | null }) => void;
-	showDatePicker?: boolean;
-	btnClassName?: string;
-	btnTip?: string;
-	Icon: ReactNode;
-}) => {
-	const [reason, setReason] = useState("");
-	const [until, setUntil] = useState<string>("default");
-	return (
-		<details className="dropdown dropdown-left dropdown-center">
-			<summary className={cn("btn btn-xs btn-square btn-soft", btnClassName)}>{Icon}</summary>
-			<div className="dropdown-content flex gap-3 bg-base-100 rounded-box z-1 p-2 mr-3 shadow-sm">
-				<input
-					value={reason}
-					onChange={(e) => setReason(e.target.value)}
-					type="text"
-					className="input min-w-[250px]"
-					placeholder="Begründung"
-				/>
-				{showDatePicker && (
-					<select
-						className="select min-w-[150px] select-bordered"
-						value={until}
-						onChange={(e) => setUntil(e.target.value)}
-					>
-						<option value="default" disabled>
-							Unbegrenzt
-						</option>
-						<option value="1h">1 Stunde</option>
-						<option value="6h">6 Stunden</option>
-						<option value="12h">12 Stunden</option>
-						<option value="24h">24 Stunden</option>
-						<option value="72h">72 Stunden</option>
-						<option value="1w">1 Woche</option>
-						<option value="2w">2 Wochen</option>
-						<option value="1m">1 Monat</option>
-						<option value="3m">3 Monate</option>
-						<option value="6m">6 Monate</option>
-						<option value="1y">1 Jahr</option>
-					</select>
-				)}
-				<button
-					className={cn(
-						"btn btn-square btn-soft tooltip tooltip-bottom tooltip-warning",
-						btnClassName,
-					)}
-					data-tip={btnTip}
-					onClick={() => {
-						let untilDate: Date | null = null;
-						if (until !== "default") {
-							const now = new Date();
-							switch (until) {
-								case "1h":
-									untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
-									break;
-								case "6h":
-									untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
-									break;
-								case "12h":
-									untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
-									break;
-								case "24h":
-									untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
-									break;
-								case "72h":
-									untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
-									break;
-								case "1w":
-									untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
-									break;
-								case "2w":
-									untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
-									break;
-								case "1m":
-									untilDate = new Date(now.setMonth(now.getMonth() + 1));
-									break;
-								case "3m":
-									untilDate = new Date(now.setMonth(now.getMonth() + 3));
-									break;
-								case "6m":
-									untilDate = new Date(now.setMonth(now.getMonth() + 6));
-									break;
-								case "1y":
-									untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
-									break;
-								default:
-									untilDate = null;
-							}
-						}
-						onClick({ reason, until: untilDate });
-					}}
-				>
-					{Icon}
-				</button>
-			</div>
-		</details>
-	);
-};
-
 export default function AdminPanel() {
 	const queryClient = useQueryClient();
 	const { data: pilots } = useQuery({

apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { ArrowLeftRight, Plane, Radar, Workflow } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";

apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx

@@ -27,7 +27,7 @@ import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
 import { selectRandomHPGMissionSzenery } from "_helpers/selectRandomHPGMission";
 import { AxiosError } from "axios";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 
 export const MissionForm = () => {
 	const { editingMissionId, setEditingMission } = usePannelStore();

apps/dispatch/app/dispatch/_components/pannel/Pannel.tsx

@@ -1,5 +1,5 @@
 import { usePannelStore } from "_store/pannelStore";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import { MissionForm } from "./MissionForm";
 import { Rss, Trash2Icon } from "lucide-react";
 import { useEffect } from "react";

apps/dispatch/app/dispatch/page.tsx

@@ -2,7 +2,7 @@
 
 import { Pannel } from "dispatch/_components/pannel/Pannel";
 import { usePannelStore } from "_store/pannelStore";
-import { cn } from "_helpers/cn";
+import { cn } from "@repo/shared-components";
 import dynamic from "next/dynamic";
 import { Chat } from "../_components/left/Chat";
 import { Report } from "../_components/left/Report";

apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx

@@ -1,9 +1,9 @@
 import { asPublicUser, BADGES, PublicUser } from "@repo/db";
 import { useQuery } from "@tanstack/react-query";
-import { Badge } from "_components/Badge/Badge";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { getConnectedDispatcherAPI } from "_querys/dispatcher";
 import { Plane, Workflow } from "lucide-react";
+import { Badge } from "@repo/shared-components";
 
 export const ConnectedDispatcher = () => {
 	const { data: dispatcher } = useQuery({
@@ -77,7 +77,7 @@ export const ConnectedDispatcher = () => {
 										{(d.publicUser as unknown as PublicUser).badges
 											.filter((b) => b.startsWith("D"))
 											.map((b) => (
-												<Badge name={b as BADGES} className="h-8 w-12" />
+												<Badge badge={b as BADGES} className="h-8 w-12" />
 											))}
 									</div>
 								</li>

apps/dispatch/package.json

@@ -19,6 +19,7 @@
 		"@next-auth/prisma-adapter": "^1.0.7",
 		"@radix-ui/react-icons": "^1.3.2",
 		"@repo/db": "workspace:*",
+		"@repo/shared-components": "workspace:*",
 		"@repo/eslint-config": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@tailwindcss/postcss": "^4.1.8",

apps/dispatch/tsconfig.json

@@ -8,14 +8,6 @@
 			}
 		]
 	},
-	"include": [
+	"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js", ".next/types/**/*.ts"],
-		"**/*.ts",
-		"**/*.tsx",
-		"next-env.d.ts",
-		"next.config.js",
-		".next/types/**/*.ts",
-		"../hub/app/_components/PaginatedTable.tsx",
-		"../hub/app/_components/Table.tsx"
-	],
 	"exclude": ["node_modules", ".next"]
 }

apps/hub-server/modules/mail-templates/Badge.tsx

@@ -1,22 +0,0 @@
-import { BADGES } from "@repo/db";
-import 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]: "day-1-member.png",
-};
-
-export const Badge = ({ badge }: { badge: BADGES }) => (
-	<img
-		src={`${process.env.NEXT_PUBLIC_HUB_URL}/badges/${badgeImageMapping[badge]}`}
-		alt="Badge"
-		width="80"
-		style={{ display: "block", margin: "0 auto" }}
-	/>
-);

apps/hub-server/modules/mail-templates/CourseCompleted.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Event, User } from "@repo/db";
 import { Html, Button, render } from "@react-email/components";
-import { Badge } from "./Badge";
+import { Badge } from "@repo/shared-components";
 import { EmailFooter } from "./EmailFooter";
 
 const styles = `

apps/hub-server/package.json

@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@react-email/components": "^0.0.41",
+		"@repo/shared-components": "workspace:*",
 		"@repo/db": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@types/cors": "^2.8.18",

apps/hub-server/tsconfig.json

@@ -1,13 +1,10 @@
 {
-	"extends": "@repo/typescript-config/base.json",
+	"extends": "@repo/typescript-config/nextjs.json",
 	"compilerOptions": {
-		"outDir": "dist",
-		"allowImportingTsExtensions": false,
 		"baseUrl": ".",
-		"jsx": "react-jsx"
+		"jsx": "react-jsx",
-		/* "moduleDirectories": ["node_modules", "."] */
+		"types": ["node", "react"]
 	},
-	"include": ["**/*.ts", "./index.ts"],
+	"include": ["."],
-
 	"exclude": ["node_modules", "dist"]
 }

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

@@ -1,6 +1,6 @@
 import { Award } from "lucide-react";
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
-import { Badge } from "../../_components/Badge/Badge";
+import { Badge } from "@repo/shared-components";
 import { JSX } from "react";
 
 export const Badges: () => Promise<JSX.Element> = async () => {
@@ -16,8 +16,14 @@ export const Badges: () => Promise<JSX.Element> = async () => {
 					</span>
 				</h2>
 				<div className="flex flex-wrap gap-2">
+					{session.user.badges.length === 0 && (
+						<span className="text-sm text-gray-500">
+							Noch ziemlich leer hier. Du kannst dir Abzeichen erarbeiten indem du an Events
+							teilnimmst.
+						</span>
+					)}
 					{session.user.badges.map((badge, i) => {
-						return <Badge name={badge} key={`${badge} - ${i}`} />;
+						return <Badge badge={badge} key={`${badge} - ${i}`} />;
 					})}
 				</div>
 			</div>

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

@@ -83,6 +83,8 @@ export const PilotStats = async () => {
 	const hours = Math.floor(totalPilotTime / (1000 * 60 * 60));
 	const minutes = Math.floor((totalPilotTime % (1000 * 60 * 60)) / (1000 * 60));
 
+	const totalFlownMissionsPercent = ((ownRankMissionsFlown * 100) / totalUserCount).toFixed(0);
+
 	return (
 		<div className="stats shadow">
 			<div className="stat">
@@ -104,7 +106,8 @@ export const PilotStats = async () => {
 				<div className="stat-title">Einsätze geflogen</div>
 				<div className="stat-value text-primary">{totalFlownMissions}</div>
 				<div className="stat-desc">
-					Du bist damit unter den top {((ownRankMissionsFlown * 100) / totalUserCount).toFixed(0)}%!
+					Du bist damit unter den top{" "}
+					{!isNaN(Number(totalFlownMissionsPercent)) ? totalFlownMissionsPercent : 0}%!
 				</div>
 			</div>
 
@@ -233,7 +236,6 @@ export const DispoStats = async () => {
 				</div>
 				<div className="stat-title">Einsätze disponiert</div>
 				<div className="stat-value text-primary">{totalDispatchedMissions}</div>
-				<div className="stat-desc">Du bist damit unter den top 9%!</div>
 			</div>
 
 			<div className="stat">

apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { PenaltyDropdown } from "@repo/shared-components";
 import {
 	BADGES,
 	ConnectedAircraft,
@@ -56,7 +57,6 @@ import { Error } from "_components/Error";
 import { useSession } from "next-auth/react";
 import { setStandardName } from "../../../../../../helper/discord";
 import { penaltyColumns } from "(app)/admin/penalty/columns";
-import { PenaltyDropdown } from "(app)/admin/user/[id]/_components/AddPenaltyDropdown";
 import { addPenalty, editPenalty, editPenaltys } from "(app)/admin/penalty/actions";
 import { reportColumns } from "(app)/admin/report/columns";
 

apps/hub/app/(app)/events/_components/item.tsx

@@ -3,7 +3,7 @@ import { DrawingPinFilledIcon } from "@radix-ui/react-icons";
 import { Event, Participant, EventAppointment, User } from "@repo/db";
 import ModalBtn from "./modalBtn";
 import MDEditor from "@uiw/react-md-editor";
-import { Badge } from "../../../_components/Badge/Badge";
+import { Badge } from "@repo/shared-components";
 
 export const EventCard = ({
 	user,
@@ -46,7 +46,7 @@ export const EventCard = ({
 						</div>
 						<div className="flex col-span-2 justify-end">
 							{event.finishedBadges.map((b) => {
-								return <Badge name={b} key={b} />;
+								return <Badge badge={b} key={b} />;
 							})}
 						</div>
 					</div>

apps/hub/app/(app)/layout.tsx

@@ -5,6 +5,7 @@ import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
 import { EmailVerification } from "_components/EmailVerification";
 import { FirstPath } from "./_components/FirstPath";
+import { Penalty } from "_components/Penalty";
 
 export const metadata: Metadata = {
 	title: "VAR: Hub",
@@ -41,6 +42,7 @@ export default async function RootLayout({
 
 						{/* Scrollbarer Content-Bereich */}
 						<div className="flex-grow bg-base-100 px-6 rounded-lg shadow-md ml-4 overflow-auto h-full max-w-full w-full">
+							<Penalty />
 							{!session?.user.emailVerified && (
 								<div className="mb-4">
 									<EmailVerification />

apps/hub/app/(app)/page.tsx

@@ -2,7 +2,7 @@ import Events from "./_components/FeaturedEvents";
 import { Stats } from "./_components/Stats";
 import { Badges } from "./_components/Badges";
 import { RecentFlights } from "(app)/_components/RecentFlights";
-import { Penalty } from "(app)/_components/Penalty";
+import { Penalty } from "_components/Penalty";
 
 export default async function Home({
 	searchParams,
@@ -13,7 +13,6 @@ export default async function Home({
 	const view = stats || "pilot";
 	return (
 		<div>
-			<Penalty />
 			<Stats stats={view} />
 			<div className="grid grid-cols-6 gap-4">
 				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">

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

@@ -1,30 +0,0 @@
-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,
-	[BADGES.V1Veteran]: DAY1,
-};
-
-export const Badge = ({ name, className }: { name: BADGES; className?: string }) => {
-	const image = BadgeImage[name];
-
-	return (
-		<span className={cn("flex h-fit p-1", className)}>
-			<img src={image.src} alt={name} width={100} />
-		</span>
-	);
-};

apps/hub/app/_components/Penalty.tsx

@@ -1,6 +1,6 @@
 import { getPublicUser, prisma } from "@repo/db";
 import { TriangleAlert } from "lucide-react";
-import { PenaltyCountdown } from "./PenaltyCountdown";
+import { PenaltyCountdown } from "../(app)/_components/PenaltyCountdown";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 
 export const Penalty = async () => {

apps/hub/package.json

@@ -16,6 +16,7 @@
 		"@radix-ui/react-icons": "^1.3.2",
 		"@repo/db": "workspace:*",
 		"@repo/eslint-config": "workspace:*",
+		"@repo/shared-components": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@tailwindcss/postcss": "^4.1.8",
 		"@tanstack/react-query": "^5.79.2",

packages/shared-components/components/Badge.tsx

@@ -0,0 +1,28 @@
+import { BADGES } from "@repo/db";
+import { cn } from "../../../apps/hub/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 }: { badge: BADGES; className?: string }) => {
+	return (
+		<span className={cn("h-fit p-1 flex justify-center items-center", className)}>
+			<img
+				src={`${process.env.NEXT_PUBLIC_HUB_URL}/badges/${badgeImageMapping[badge]}`}
+				alt="Badge"
+				width="80"
+				height="auto"
+				className="block h-auto max-h-[80px] w-auto"
+			/>
+		</span>
+	);
+};

packages/shared-components/components/PenaltyDropdown.tsx

@@ -1,5 +1,6 @@
+"use client";
 import { ReactNode, useState } from "react";
-import { cn } from "../../../../../../helper/cn";
+import { cn } from "../helper/cn";
 
 export const PenaltyDropdown = ({
 	onClick,

packages/shared-components/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./Badge";
+export * from "./PenaltyDropdown";

packages/shared-components/helper/index.ts

@@ -0,0 +1 @@
+export * from "./cn";

packages/shared-components/index.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./helper";

packages/shared-components/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "@repo/shared-components",
+	"version": "0.1.0",
+	"type": "module",
+	"exports": {
+		".": "./index.ts"
+	},
+	"main": "index.ts",
+	"dependencies": {
+		"@repo/db": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
+		"@types/node": "^22.15.29",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.3.0"
+	},
+	"devDependencies": {
+		"@types/react": "^19.1.6",
+		"@types/react-dom": "^19.1.5",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	}
+}

packages/shared-components/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@repo/typescript-config/nextjs.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"jsx": "react-jsx",
+		"types": ["node", "react"]
+	},
+	"include": ["."],
+	"exclude": ["node_modules"]
+}

pnpm-lock.yaml

@@ -92,7 +92,7 @@ importers:
         version: 0.5.7(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.13.3(@types/dom-mediacapture-record@1.0.22))
       '@next-auth/prisma-adapter':
         specifier: ^1.0.7
-        version: 1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
+        version: 1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
       '@radix-ui/react-icons':
         specifier: ^1.3.2
         version: 1.3.2(react@19.1.0)
@@ -102,6 +102,9 @@ importers:
       '@repo/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
+      '@repo/shared-components':
+        specifier: workspace:*
+        version: link:../../packages/shared-components
       '@repo/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
@@ -167,7 +170,7 @@ importers:
         version: 15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-auth:
         specifier: ^4.24.11
-        version: 4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       npm:
         specifier: ^11.4.1
         version: 11.4.1
@@ -325,7 +328,7 @@ importers:
         version: 5.0.1(react-hook-form@7.57.0(react@19.1.0))
       '@next-auth/prisma-adapter':
         specifier: ^1.0.7
-        version: 1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
+        version: 1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
       '@radix-ui/react-icons':
         specifier: ^1.3.2
         version: 1.3.2(react@19.1.0)
@@ -335,6 +338,9 @@ importers:
       '@repo/eslint-config':
         specifier: workspace:*
         version: link:../../packages/eslint-config
+      '@repo/shared-components':
+        specifier: workspace:*
+        version: link:../../packages/shared-components
       '@repo/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
@@ -403,7 +409,7 @@ importers:
         version: 15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-auth:
         specifier: ^4.24.11
-        version: 4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-remove-imports:
         specifier: ^1.0.12
         version: 1.0.12(webpack@5.99.9)
@@ -458,6 +464,9 @@ importers:
       '@repo/db':
         specifier: workspace:*
         version: link:../../packages/database
+      '@repo/shared-components':
+        specifier: workspace:*
+        version: link:../../packages/shared-components
       '@repo/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
@@ -566,6 +575,37 @@ importers:
         specifier: ^8.15.0
         version: 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
 
+  packages/shared-components:
+    dependencies:
+      '@repo/db':
+        specifier: workspace:*
+        version: link:../database
+      '@repo/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/node':
+        specifier: ^22.15.29
+        version: 22.15.29
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      tailwind-merge:
+        specifier: ^3.3.0
+        version: 3.3.0
+    devDependencies:
+      '@types/react':
+        specifier: ^19.1.6
+        version: 19.1.6
+      '@types/react-dom':
+        specifier: ^19.1.5
+        version: 19.1.5(@types/react@19.1.6)
+      react:
+        specifier: ^19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.1.0(react@19.1.0)
+
   packages/typescript-config: {}
 
 packages:
@@ -6596,10 +6636,10 @@ snapshots:
       '@tybys/wasm-util': 0.9.0
     optional: true
 
-  '@next-auth/prisma-adapter@1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
+  '@next-auth/prisma-adapter@1.0.7(@prisma/client@6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3))(next-auth@4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0))':
     dependencies:
       '@prisma/client': 6.8.2(prisma@6.8.2(typescript@5.8.3))(typescript@5.8.3)
-      next-auth: 4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next-auth: 4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
 
   '@next/env@15.3.3': {}
 
@@ -10945,7 +10985,7 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-auth@4.24.11(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  next-auth@4.24.11(next@15.3.3(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@babel/runtime': 7.27.4
       '@panva/hkdf': 1.2.1