Footer in eigenem Component

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

@@ -0,0 +1,75 @@
+import Image from "next/image";
+import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
+import YoutubeSvg from "./youtube_wider.svg";
+import FacebookSvg from "./facebook.svg";
+
+export const Footer = () => {
+	return (
+		<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
+			{/* Left: Impressum & Datenschutz */}
+			<div className="flex gap-4 text-sm">
+				<a href="https://virtualairrescue.com/impressum/" className="hover:text-primary">
+					Impressum
+				</a>
+				<a href="https://virtualairrescue.com/datenschutz/" className="hover:text-primary">
+					Datenschutzerklärung
+				</a>
+			</div>
+
+			{/* Center: Copyright */}
+			<p className="text-sm">Copyright © {new Date().getFullYear()} - Virtual Air Rescue</p>
+
+			{/* Right: Social Icons */}
+			<div className="flex gap-4">
+				<div className="tooltip tooltip-top" data-tip="Discord">
+					<a
+						href="https://discord.gg/yn7uXmmNnG"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary"
+					>
+						<DiscordLogoIcon className="w-5 h-5" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="YouTube">
+					<a
+						href="https://www.youtube.com/@VirtualAirRescue"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary text-white"
+					>
+						<Image src={YoutubeSvg} className="invert w-5 h5" alt="Youtube Icon" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="Facebook">
+					<a
+						href="https://www.facebook.com/people/Virtual-Air-Rescue/100090867294041/#"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary text-white"
+					>
+						<Image src={FacebookSvg} className="invert w-5 h5" alt="Youtube Icon" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="Instagram">
+					<a
+						href="https://www.instagram.com/virtualairrescue/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary"
+					>
+						<InstagramLogoIcon className="w-5 h-5" />
+					</a>
+				</div>
+				<div className="tooltip tooltip-top" data-tip="Knowledgebase">
+					<a href="https://docs.virtualairrescue.com/" className="hover:text-primary">
+						<ReaderIcon className="w-5 h-5" />
+					</a>
+				</div>
+			</div>
+		</footer>
+	);
+};