Use heading in header

oBusk · May 2, 2023 · a551a62 · a551a62
1 parent f23893e
commit a551a62
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/app/_layout/Header/Header.tsx b/src/app/_layout/Header/Header.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { forwardRef, HTMLAttributes } from "react";
+import Heading from "^/components/ui/Heading";
 import cn from "^/lib/cn";
 import ColorModeToggle from "./ColorModeToggle";
 import GithubLink from "./GithubLink";
@@ -25,9 +26,7 @@ const Header = forwardRef<HTMLElement, HeaderProps>(
                 href="/"
                 className="block rounded-md transition-all duration-200 hover:no-underline focus:outline-none"
             >
-                <h1 className="text-xl font-bold sm:text-2xl lg:text-4xl">
-                    npm-diff.app 📦🔃
-                </h1>
+                <Heading variant="h1">npm-diff.app 📦🔃</Heading>
             </Link>
             <div className="flex items-center justify-end">
                 <NavLink href="/about">about</NavLink>

diff --git a/src/components/ui/Heading.tsx b/src/components/ui/Heading.tsx
@@ -4,10 +4,10 @@ import { forwardRef, HTMLAttributes } from "react";
 const headingVariants = cva("font-bold", {
     variants: {
         variant: {
-            h1: "text-4xl",
-            h2: "text-3xl",
-            h3: "text-2xl",
-            h4: "text-xl",
+            h1: "text-xl sm:text-2xl md:text-3xl lg:text-4xl",
+            h2: "text-xl md:text-2xl lg:text-3xl",
+            h3: "text-lg md:text-xl lg:text-2xl",
+            h4: "text-lg lg:text-xl",
         },
     },
 });