Standard logo

Author: brianclemens

app/[locale]/Header.tsx

@@ -2,7 +2,7 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import Image from "next/image";
 
-import RockyPrideLogo from "@/public/images/pride-logo.png";
+import Logo from "@/components/Logo";
 import { Button } from "@/components/ui/button";
 
 import DarkModeToggle from "./components/header/DarkModeToggle";
@@ -61,21 +61,7 @@ export default function Header() {
             className="-m-1.5 p-1.5"
           >
             <span className="sr-only">{tGlobal("name")}</span>
-            <div className="flex items-center gap-2">
-              <Image
-                src={RockyPrideLogo}
-                alt="Rocky Linux Pride Logo"
-                className="h-9 w-auto"
-              />
-              <span className="text-2xl font-display">
-                <span className="font-extrabold">
-                  {tGlobal("name").split(" ")[0]}
-                </span>{" "}
-                <span className="font-normal">
-                  {tGlobal("name").split(" ")[1]}
-                </span>
-              </span>
-            </div>
+            <Logo />
           </Link>
         </div>
         <MobileNavigation

app/[locale]/components/header/MobileNavigation.tsx

@@ -7,11 +7,10 @@ import {
   SheetClose,
 } from "@/components/ui/sheet";
 import { Accordion } from "@/components/ui/accordion";
-import Image from "next/image";
 import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
-import RockyPrideLogo from "@/public/images/pride-logo.png";
+import Logo from "@/components/Logo";
 
 import DarkModeToggle from "./DarkModeToggle";
 import NavItem from "./nav/mobile/NavItem";
@@ -58,21 +57,7 @@ const MobileNavigation = ({
           className="w-full"
         >
           <Link href="/">
-            <div className="flex items-center gap-2">
-              <Image
-                src={RockyPrideLogo}
-                alt="Rocky Linux Pride Logo"
-                className="h-9 w-auto"
-              />
-              <span className="text-2xl font-display">
-                <span className="font-extrabold">
-                  {rockyLinuxSRText.split(" ")[0]}
-                </span>{" "}
-                <span className="font-normal">
-                  {rockyLinuxSRText.split(" ")[1]}
-                </span>
-              </span>
-            </div>
+            <Logo />
             <span className="sr-only">{rockyLinuxSRText}</span>
           </Link>
           <Accordion