Merge pull request #85 from dtran421/utils_cn_refactor

Refactored classnames to use cn()

src/app/main-layout.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ReactNode, useContext } from "react";
+import { cn } from "utils-toolkit";
 
 import { ContentfulLivePreviewProvider } from "@contentful/live-preview/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -23,7 +24,7 @@ const MainLayout = ({ debug, children }: MainLayoutProps) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ContentfulLivePreviewProvider locale="en-US" enableInspectorMode enableLiveUpdates debugMode={debug}>
-        <div className={`${darkMode ? "dark" : ""}`}>
+        <div className={cn(darkMode && "dark")}>
           <div className="w-full min-h-screen relative bg-zinc-100 dark:bg-zinc-900 transition duration-200 ease-in dark:text-white pb-16">
             {[DesktopNavbar, MobileNavbar].map((Navbar) => (
               <Navbar key={Navbar.name} />

src/app/projects/(project-pages)/(app-demo)/app-demo-layout.tsx

@@ -3,6 +3,7 @@
 import { ReactNode } from "react";
 import Image from "next/image";
 import { useSelectedLayoutSegment } from "next/navigation";
+import { cn } from "utils-toolkit";
 
 import BackgroundMotivation from "@/components/Projects/AppDemo/BackgroundMotivation";
 import MenuBar from "@/components/Projects/AppDemo/MenuBar";
@@ -17,9 +18,10 @@ import whispearringsData from "@/public/json/whispearrings.json";
 
 const CollegeTalkSplashScreen = ({ visible }: { visible: boolean }) => (
   <div
-    className={`absolute ${
+    className={cn(
+      "absolute left-0 top-0 rounded-3xl p-2 transition duration-200 ease-linear",
       visible ? "opacity-100" : "opacity-0"
-    } left-0 top-0 rounded-3xl p-2 transition duration-200 ease-linear`}
+    )}
   >
     <figure className="relative rounded-3xl overflow-hidden">
       <Image

src/app/projects/(project-pages)/projects-layout.tsx

@@ -18,9 +18,9 @@ const ProjectLayout = ({ children }: ProjectLayoutProps) => {
   return (
     <>
       <ProjectsBanner
-        pageTitle={projectData?.title ?? "Project not found"}
-        accentColor={projectData?.accentColor ?? "#FFF"}
-        darkText={projectData?.darkText ?? true}
+        pageTitle={projectData?.title}
+        accentColor={projectData?.accentColor}
+        darkText={projectData?.darkText}
         github={projectData?.github}
       />
       <ProjectsBackButton />

src/components/Blog/BlogPostCard.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import moment from "moment";
 import { FiTag } from "react-icons/fi";
+import { cn } from "utils-toolkit";
 
 import useEstimateReadingTime from "@/hooks/useEstimateReadingTime";
 import { BlogPost } from "@/utils/types";
@@ -44,18 +45,20 @@ const BlogPostCard = ({
     <Link href={`/blog/${postId}`} passHref>
       <button
         type="button"
-        className={`${
-          featured ? "flex flex-col lg:grid lg:grid-cols-3" : ""
-        } overflow-hidden border-2 border-transparent hover:border-primary/75 dark-transition rounded-xl space-y-4`}
+        className={cn(
+          "overflow-hidden border-2 border-transparent hover:border-primary/75 dark-transition rounded-xl space-y-4",
+          featured && "flex flex-col lg:grid lg:grid-cols-3"
+        )}
       >
         <div
-          className={`flex items-center overflow-hidden ${
+          className={cn(
+            "flex items-center overflow-hidden rounded-lg",
             featured ? "lg:col-span-2 md:h-48 lg:h-72" : "lg:h-40 xl:h-44"
-          } rounded-lg`}
+          )}
         >
           <Image src={url} alt={imgTitle} width={width} height={height} layout="intrinsic" className="rounded-lg" />
         </div>
-        <div className={`w-full space-y-2 lg:space-y-3 ${featured ? "p-3 lg:p-4" : "px-3 lg:px-4 pb-3 lg:pb-4"}`}>
+        <div className={cn("w-full space-y-2 lg:space-y-3", featured ? "p-3 lg:p-4" : "px-3 lg:px-4 pb-3 lg:pb-4")}>
           <div>
             <div className="flex lg:flex-col xl:flex-row justify-between lg:items-start text-gray-700 dark:text-gray-300">
               <p className="text-sm lg:text-base">{moment(publishDate).format("MMMM Do, YYYY")}</p>

src/components/Global/DesktopNavbar.tsx

@@ -1,4 +1,5 @@
 import { motion } from "framer-motion";
+import { cn } from "utils-toolkit";
 
 import { useStickyNavbar } from "@/hooks/useStickyNavbar";
 
@@ -24,9 +25,10 @@ const DesktopNavbar = () => {
       initial="fixed"
       animate={sticky ? "sticky" : "fixed"}
       variants={navbarVariants}
-      className={`sticky top-0 w-full z-50 hidden lg:block ${
+      className={cn(
+        "sticky top-0 w-full z-50 hidden lg:block dark-transition backdrop-blur-lg pt-4 transition-all duration-200 ease-linear",
         sticky ? "bg-zinc-100/80 dark:bg-zinc-900/80" : "bg-zinc-100 dark:bg-zinc-900"
-      } dark-transition backdrop-blur-lg pt-4 transition-all duration-200 ease-linear`}
+      )}
     >
       <div className="relative flex justify-between items-center mx-6">
         <p className="font-Oxygen text-4xl bg-clip-text text-transparent bg-gradient-to-tr from-primary to-secondary font-bold">

src/components/Global/MobileNavbar.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FiMenu, FiX } from "react-icons/fi";
+import { cn } from "utils-toolkit";
 
 import { useStickyNavbar } from "@/hooks/useStickyNavbar";
 
@@ -53,9 +54,10 @@ const MobileNavbar = () => {
   return (
     <motion.header
       animate={isExpanded ? "expanded" : "collapsed"}
-      className={`w-full sticky top-0 z-50 flex lg:hidden flex-col border-b border-b-neutral-300 dark:border-b-neutral-700 dark-transition ${
+      className={cn(
+        "w-full sticky top-0 z-50 flex lg:hidden flex-col border-b border-b-neutral-300 dark:border-b-neutral-700 dark-transition shadow-lg",
         sticky ? "bg-neutral-300/80 dark:bg-neutral-800/80 backdrop-blur-lg" : "bg-neutral-300 dark:bg-neutral-800"
-      } shadow-lg`}
+      )}
     >
       <div className="relative bg-inherit">
         <div className="relative z-40 grid grid-cols-3 px-6 py-2">

src/components/Global/NavLink.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
 import { startCase } from "lodash";
+import { cn } from "utils-toolkit";
 
 export const TABS = ["Portfolio", "Resume", "Blog", "Projects"] as const;
 
@@ -17,11 +18,12 @@ const NavLink = ({ link, mobile = false }: NavlinkProps) => {
     <Link href={`/${link.toLowerCase()}`} passHref>
       <button
         type="button"
-        className={`w-full flex justify-center text-xl border-2 rounded-lg ${
+        className={cn(
+          "w-full flex justify-center text-xl border-2 rounded-lg dark-transition px-6 py-1",
           active
             ? "dark:text-white dark:bg-zinc-500/20 border-black/40 dark:border-white/40 border-opacity-100"
             : "border-transparent focus:border-primary text-primary hover:border-primary"
-        } dark-transition px-6 py-1`}
+        )}
       >
         {link}
       </button>
@@ -31,11 +33,12 @@ const NavLink = ({ link, mobile = false }: NavlinkProps) => {
       <Link href={`/${link.toLowerCase()}`} passHref>
         <button
           type="button"
-          className={`w-full flex justify-center text-xl border-b-4 ${
+          className={cn(
+            "w-full flex justify-center text-xl border-b-4 dark-transition px-5 py-3",
             active
               ? "dark:text-white border-black dark:border-white border-opacity-100"
               : "border-b-transparent text-primary hover:border-primary"
-          } dark-transition px-5 py-3`}
+          )}
         >
           {link}
         </button>

src/components/Portfolio/Carousel.tsx

@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import Typewriter from "typewriter-effect";
+import { cn } from "utils-toolkit";
 
 import { useCarouselControl } from "@/hooks/useCarouselControl";
 
@@ -24,9 +25,10 @@ const Carousel = () => {
             src={`/img/carousel/${imageData.pic}`}
             width={imageData.width}
             height={imageData.height}
-            className={`rounded-xl transition duration-200 ease-linear ${
+            className={cn(
+              "rounded-xl transition duration-200 ease-linear",
               phase === "visible" ? "opacity-100" : "opacity-0"
-            }`}
+            )}
             priority
           />
         )}

src/components/Portfolio/Event.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FiArrowDownCircle } from "react-icons/fi";
 import { MdDesktopMac, MdSchool, MdWork } from "react-icons/md";
+import { cn } from "utils-toolkit";
 
 import { convertDateToAbbrevString } from "@/utils/ClientUtil";
 import { RichText, TimelineEvent } from "@/utils/types";
@@ -37,9 +38,10 @@ const Card = ({
 }: CardProps) => (
   <div
     id="event"
-    className={`overflow-hidden order-1 ${
+    className={cn(
+      "overflow-hidden order-1 rounded-lg shadow-xl w-10/12 md:w-5/12 p-4",
       side === "L" ? "bg-primary" : "bg-secondary"
-    } rounded-lg shadow-xl w-10/12 md:w-5/12 p-4`}
+    )}
   >
     <div className="flex justify-between text-white space-x-2">
       <h3 className="font-bold text-lg">{heading}</h3>
@@ -118,7 +120,7 @@ const Event = ({ side, event: { heading, type, startDate, endDate, currentlyWork
 
   return (
     <>
-      <div className={`w-full hidden md:flex ${side === "R" ? "flex-row-reverse" : ""} justify-between items-center`}>
+      <div className={cn("w-full hidden md:flex justify-between items-center", side === "R" && "flex-row-reverse")}>
         <Card
           side={side}
           isExpanded={isExpanded}
@@ -127,7 +129,7 @@ const Event = ({ side, event: { heading, type, startDate, endDate, currentlyWork
           description={description}
         />
         <EventIcon type={type} />
-        <div className={`order-1 w-5/12 flex ${side === "L" ? "justify-start" : "justify-end"}`}>
+        <div className={cn("order-1 w-5/12 flex", side === "L" ? "justify-start" : "justify-end")}>
           <AnimatePresence>
             {isExpanded && (
               <motion.p

src/components/Portfolio/LangProfile.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { cn } from "utils-toolkit";
 
 export type LangProfileProps = {
   name: string;
@@ -16,9 +17,10 @@ const LangProfile = ({ name, imgSrc, accentColor, darkText }: LangProfileProps)
     </div>
     <p
       style={{ backgroundColor: accentColor }}
-      className={`w-5/6 rounded-full ${
+      className={cn(
+        "w-5/6 rounded-full font-semibold text-sm lg:text-base text-center py-1 my-2",
         darkText ? "text-zinc-900" : "text-zinc-100"
-      } font-semibold text-sm lg:text-base text-center py-1 my-2`}
+      )}
     >
       {name}
     </p>

src/components/Projects/AppDemo/PhoneDemo.tsx

@@ -1,11 +1,13 @@
 import Image from "next/image";
 import { FaApple } from "react-icons/fa";
+import { cn } from "utils-toolkit";
 
 const DefaultPlaceholder = ({ visible }: { visible: boolean }) => (
   <figure
-    className={`w-full h-full absolute ${
+    className={cn(
+      "w-full h-full absolute top-0 bg-zinc-800 dark:bg-zinc-200 dark-transition rounded-3xl transition duration-200 ease-linear",
       visible ? "opacity-100" : "opacity-0"
-    } top-0 bg-zinc-800 dark:bg-zinc-200 dark-transition rounded-3xl transition duration-200 ease-linear`}
+    )}
   >
     <div className="w-full h-full relative">
       <FaApple size={64} className="absolute left-1/2 top-1/4 -translate-x-1/2 dark-transition" />
@@ -32,7 +34,7 @@ const PhoneDemo = ({ page, activeParagraph, active, ImagePlaceholder = DefaultPl
             <Image
               alt={`${page} video ${activeParagraph + 1 || 1}`}
               src={`/img/projects/${page}/${page}${activeParagraph + 1 || 1}.gif`}
-              className={`transition duration-200 ease-linear ${active ? "opacity-100" : "opacity-0"} rounded-3xl`}
+              className={cn("transition duration-200 ease-linear rounded-3xl", active ? "opacity-100" : "opacity-0")}
               width={1170}
               height={2532}
             />

src/components/Projects/FilePreview.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import Image from "next/image";
 import { IconContext } from "react-icons";
 import { FiDownload, FiMaximize2 } from "react-icons/fi";
+import { cn } from "utils-toolkit";
 
 type FilePreviewProps = {
   label: string;
@@ -26,12 +27,12 @@ const FilePreview = ({ label, filePath, previewImgPath, width, height, addBg = f
   const action = filePath.substring(filePath.indexOf(".") + 1) === "pdf" ? "view" : "download";
 
   return (
-    <div className={`w-full flex justify-center ${addBg ? "bg-white rounded-xl" : ""}`}>
+    <div className={cn("w-full flex justify-center", addBg && "bg-white rounded-xl")}>
       <a
         href={`/files${filePath}`}
         target="_blank"
         rel="noopener noreferrer"
-        className={`relative overflow-hidden w-full ${addBg ? "h-full" : ""} flex justify-center items-center group`}
+        className={cn("relative overflow-hidden w-full flex justify-center items-center group", addBg && "h-full")}
       >
         <div className="absolute left-0 top-0 z-20 bg-primary/80 group-hover:bg-primary backdrop-blur-lg rounded-full px-2 md:px-3 md:py-1 m-1 md:m-3">
           <p className="text-sm md:text-lg text-white font-medium">{label}</p>

src/components/Projects/Finance/StockCard.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { lowerCase, startCase } from "lodash";
 import moment from "moment";
 import Skeleton from "react-loading-skeleton";
+import { cn } from "utils-toolkit";
 
 import FetchError from "@/components/Global/FetchError";
 import useGetStockCompany from "@/hooks/useGetStockCompany";
@@ -38,7 +39,7 @@ const ReturnText = ({ change, changePct }: ReturnTextProps) => {
   const sign = hasGained ? "+" : "-";
 
   return (
-    <p className={`inline-block text-xl md:text-2xl ${hasGained ? "text-green-500" : "text-red-500"}`}>
+    <p className={cn("inline-block text-xl md:text-2xl", hasGained ? "text-green-500" : "text-red-500")}>
       {sign}${Math.abs(change).toFixed(2)} ({sign}
       {Math.abs(changePct).toFixed(2)}%)
     </p>
@@ -55,11 +56,10 @@ interface CellProps {
 const Cell = ({ label, value, lastRow, loading }: CellProps) => (
   <li
     key={label}
-    className={`flex justify-between border-b-2 ${
-      lastRow ? "last-of-type:border-b-0 md:border-b-0" : ""
-    } border-slate-800/40 dark:border-slate-200/40 space-x-2 py-1 md:py-3 ${
-      lastRow ? "last-of-type:pb-0 md:pb-0" : ""
-    }`}
+    className={cn(
+      "flex justify-between border-b-2 border-slate-800/40 dark:border-slate-200/40 space-x-2 py-1 md:py-3",
+      lastRow && "last-of-type:border-b-0 md:border-b-0 last-of-type:pb-0 md:pb-0"
+    )}
   >
     <p>{label}</p>
     <p className="font-medium text-right">{loading ? <Skeleton width={100} /> : value}</p>

src/components/Projects/GithubLink.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from "react";
 import { FiCheck, FiCopy } from "react-icons/fi";
+import { cn } from "utils-toolkit";
 
 interface GithubLinkProps {
   github: string;
@@ -23,18 +24,22 @@ const GithubLink = ({ github, darkText, compact = false }: GithubLinkProps) => {
   return (
     <div className="flex justify-center items-center space-x-4">
       <p
-        className={`${compact ? "text-sm md:text-lg" : "text-lg md:text-xl"} ${
+        className={cn(
+          "font-medium",
+          compact ? "text-sm md:text-lg" : "text-lg md:text-xl",
           darkText ? "text-black" : "text-white"
-        } font-medium`}
+        )}
       >
         Github Repo
       </p>
       <div className="flex justify-center items-center bg-zinc-100 dark:bg-zinc-900 ring-2 ring-zinc-300 dark:ring-zinc-700/50 dark-transition rounded-lg">
         <button
           type="button"
-          className={`${compact ? "w-40 md:w-64" : "w-56 md:w-80"} text-md xl:text-lg rounded-l-lg ${
+          className={cn(
+            "text-md xl:text-lg rounded-l-lg px-3 py-1 cursor-default",
+            compact ? "w-40 md:w-64" : "w-56 md:w-80",
             isFocused && "ring-2 ring-zinc-100/75"
-          } px-3 py-1 cursor-default`}
+          )}
           onClick={() => githubLink.current?.select()}
           aria-label="Github link"
         >
@@ -49,11 +54,12 @@ const GithubLink = ({ github, darkText, compact = false }: GithubLinkProps) => {
         </button>
         <button
           type="button"
-          className={`w-10 h-8 xl:h-10 flex justify-center items-center ring-2 ${
+          className={cn(
+            "w-10 h-8 xl:h-10 flex justify-center items-center ring-2 rounded-r-lg bg-zinc-300/20 dark:bg-zinc-700/20 hover:bg-zinc-300/50 dark:hover:bg-zinc-700/50 transition duration-150 ease-linear",
             isCopyActive
               ? "text-green-500 ring-green-500"
               : "dark:text-white ring-zinc-300 dark:ring-zinc-700/50 hover:ring-zinc-400 dark:hover:ring-zinc-600"
-          } rounded-r-lg bg-zinc-300/20 dark:bg-zinc-700/20 hover:bg-zinc-300/50 dark:hover:bg-zinc-700/50 transition duration-150 ease-linear`}
+          )}
           onClick={() => copyToClipboard()}
           onBlur={() => setCopyActive(false)}
         >