cleanup

roqqetmedia · Aug 18, 2023 · e5ddfe6 · e5ddfe6
1 parent ca6bb8b
commit e5ddfe6
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@typescript-eslint/eslint-plugin": "6.4.0",
     "@typescript-eslint/parser": "6.4.0",
     "autoprefixer": "10.4.15",
+    "clsx": "2.0.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.18",
     "eslint-config-prettier": "9.0.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,7 @@
 import { ReactNode } from "react";
-import { Montserrat } from "next/font/google";
-import { twMerge } from "tailwind-merge";
 import Header from "@/ui/header/header";
 import Footer from "@/ui/footer/footer";
+import { cn, montserratFont } from "@/utils";
 import { APP_ENV, SITE_URL } from "@/config";
 import "@/app/globals.css";
 
@@ -61,12 +60,6 @@ export const metadata = {
   },
 };
 
-const montserrat = Montserrat({
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-  subsets: ["latin"],
-  variable: "--font-montserrat",
-});
-
 interface RootLayoutProps {
   children: ReactNode;
 }
@@ -75,8 +68,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
       <body
-        className={twMerge(
-          montserrat.variable,
+        className={cn(
+          montserratFont.variable,
           "font-sans",
           "flex h-screen flex-col justify-between",
         )}

diff --git a/src/ui/header/header-content-container.tsx b/src/ui/header/header-content-container.tsx
@@ -2,8 +2,8 @@
 
 import Image from "next/image";
 import { motion } from "framer-motion";
-import { twMerge } from "tailwind-merge";
 import { useImageLoading } from "@/hooks";
+import { cn } from "@/utils";
 import { fadeUpAnimationVariants } from "@/consts";
 
 export default function HeaderContentContainer() {
@@ -21,7 +21,7 @@ export default function HeaderContentContainer() {
         variants={fadeUpAnimationVariants}
       >
         <Image
-          className={twMerge(
+          className={cn(
             "h-auto w-full",
             "duration-700 ease-in-out",
             loadingAnimation,

diff --git a/src/utils/cn.ts b/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts
@@ -0,0 +1,7 @@
+import { Montserrat } from "next/font/google";
+
+export const montserratFont = Montserrat({
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+});
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from "./cn";
+export * from "./fonts";
diff --git a/yarn.lock b/yarn.lock
@@ -720,6 +720,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"