From 040310d8d6be21b40aa5015ef015bfea992b6011 Mon Sep 17 00:00:00 2001
From: Volodymyr Gerun <vgerun97@gmail.com>
Date: Thu, 8 Aug 2024 17:39:34 +0300
Subject: [PATCH] style(InfoBadge component): rename, add props and use
 everywhere

---
 app/lib/utils.ts                         | 16 +++++++++
 app/page.tsx                             |  6 ++--
 app/settings/page.tsx                    |  6 ++--
 app/ui/categories/categories.tsx         | 12 +++----
 app/ui/categories/category-item.tsx      |  4 +--
 app/ui/hoverables.tsx                    |  4 +--
 app/ui/{info-badge.tsx => info-text.tsx} | 11 +++++--
 app/ui/logo.tsx                          |  9 +++---
 app/ui/sign-in/sign-in.tsx               |  6 ++--
 app/ui/transaction-form-edit.tsx         |  6 ++--
 app/ui/transaction-list.tsx              | 41 ++++++++++++++----------
 11 files changed, 76 insertions(+), 45 deletions(-)
 rename app/ui/{info-badge.tsx => info-text.tsx} (57%)

diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 40bfc29..dffc5a3 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,6 +1,8 @@
 import toast from 'react-hot-toast'
 
+import config from '@/tailwind.config'
 import { CalendarDate } from '@internationalized/date'
+import { type ClassValue, clsx } from 'clsx'
 import {
   format,
   getDate,
@@ -10,11 +12,25 @@ import {
   isYesterday,
 } from 'date-fns'
 import emojiRegex from 'emoji-regex'
+import { extendTailwindMerge } from 'tailwind-merge'
 
 import { CURRENCY_CODE, DEFAULT_CATEGORY } from '@/config/constants/main'
 
 import type { TGetTransactions, THTMLElement, TTransaction } from './types'
 
+export const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': Object.keys(config?.theme?.extend?.fontSize!).map(
+        (key) => `text-${key}`,
+      ),
+    },
+  },
+})
+export function cn(...args: ClassValue[]) {
+  return customTwMerge(clsx(args))
+}
+
 export const capitalizeFirstLetter = (str: string): string => {
   if (!str) return str
   return str.charAt(0).toUpperCase() + str.slice(1)
diff --git a/app/page.tsx b/app/page.tsx
index a90fd7d..ae4c580 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,7 +32,7 @@ import {
   pluralize,
 } from './lib/utils'
 import BalanceLine from './ui/balance-line'
-import InfoBadge from './ui/info-badge'
+import InfoText from './ui/info-text'
 import NoTransactionsPlug from './ui/no-transaction-text'
 import PaginationList from './ui/pagination/pagination-list'
 import Search from './ui/search'
@@ -143,8 +143,8 @@ export default async function Home({
             <>
               <NoTransactionsPlug />
               <div className='mt-2 flex flex-col gap-2'>
-                <InfoBadge text='The first written transaction means creating your account.' />
-                <InfoBadge text='The last deleted transaction means deleting your account.' />
+                <InfoText text='The first written transaction means creating your account.' />
+                <InfoText text='The last deleted transaction means deleting your account.' />
               </div>
             </>
           ) : (
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 566b562..c0044ce 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -11,7 +11,7 @@ import {
   getTransactionLimit,
   signOutAccount,
 } from '../lib/actions'
-import InfoBadge from '../ui/info-badge'
+import InfoText from '../ui/info-text'
 import NoTransactionsPlug from '../ui/no-transaction-text'
 import Currency from '../ui/settings/currency'
 import DeleteAccount from '../ui/settings/delete-account'
@@ -50,8 +50,8 @@ export default async function Page() {
         >
           <>
             <div className='my-2 flex flex-col gap-2'>
-              <InfoBadge text='Will reload the page.' />
-              <InfoBadge text='When you select the system theme, the general pop-up will always be dark.' />
+              <InfoText text='Will reload the page.' />
+              <InfoText text='When you select the system theme, the general pop-up will always be dark.' />
             </div>
             <div className='max-w-xs'>
               <ThemeSwitcher />
diff --git a/app/ui/categories/categories.tsx b/app/ui/categories/categories.tsx
index 706c774..cadacf4 100644
--- a/app/ui/categories/categories.tsx
+++ b/app/ui/categories/categories.tsx
@@ -33,7 +33,7 @@ import {
 import { capitalizeFirstLetter, deepCompareArrays } from '@/app/lib/utils'
 
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import Category from './category'
 
 type TProps = {
@@ -232,10 +232,10 @@ function Categories({ userId, userCategories }: TProps) {
         </Button>
       </div>
       <div className='mt-4 flex flex-col gap-2 md:mt-8'>
-        <InfoBadge text='If necessary, it is better to customize all categories at once for yourself and not edit them in the future to avoid overlapping transaction category names.' />
-        <InfoBadge text='Once editing, you will need to manually update your previous transactions with previous categories to new categories. You will see a badge on them.' />
-        <InfoBadge text='The emoji picker may appear with a slight delay.' />
-        <InfoBadge
+        <InfoText text='If necessary, it is better to customize all categories at once for yourself and not edit them in the future to avoid overlapping transaction category names.' />
+        <InfoText text='Once editing, you will need to manually update your previous transactions with previous categories to new categories. You will see a badge on them.' />
+        <InfoText text='The emoji picker may appear with a slight delay.' />
+        <InfoText
           id='hint-1'
           text='1. The category subject does not affect the category data.'
           withAsterisk={false}
@@ -263,7 +263,7 @@ function Categories({ userId, userCategories }: TProps) {
                   state? This action is irreversible and will reset all your
                   current category data to default.
                 </p>
-                <InfoBadge text='Once reset, you will need to manually update your previous transactions with previous categories to new default categories. You will see a badge on them.' />
+                <InfoText text='Once reset, you will need to manually update your previous transactions with previous categories to new default categories. You will see a badge on them.' />
               </ModalBody>
               <ModalFooter>
                 <Button
diff --git a/app/ui/categories/category-item.tsx b/app/ui/categories/category-item.tsx
index e4cb9f8..feba410 100644
--- a/app/ui/categories/category-item.tsx
+++ b/app/ui/categories/category-item.tsx
@@ -19,7 +19,7 @@ import type {
 } from '@/app/lib/types'
 
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import CustomEmojiPicker from './custom-emoji-picker'
 
 type TProps = {
@@ -127,7 +127,7 @@ function CategoryItem({
             <div className='overflow-hidden text-ellipsis whitespace-nowrap text-balance'>
               {item.name}
               {item.name === DEFAULT_CATEGORY && (
-                <InfoBadge text='Default category' withAsterisk={false} />
+                <InfoText text='Default category' withAsterisk={false} />
               )}
             </div>
           </div>
diff --git a/app/ui/hoverables.tsx b/app/ui/hoverables.tsx
index 441be6e..d6a1988 100644
--- a/app/ui/hoverables.tsx
+++ b/app/ui/hoverables.tsx
@@ -5,11 +5,11 @@ import { useHover } from 'react-use'
 import Link from 'next/link'
 
 import { motion } from 'framer-motion'
-import { twMerge } from 'tailwind-merge'
 
 import { DIV } from '@/config/constants/framer'
 
 import type { TNavLink, TSelect } from '../lib/types'
+import { cn } from '../lib/utils'
 
 type THoverableElement = {
   element: TSelect['icon'] | string
@@ -51,7 +51,7 @@ export const HoverableNavLink = ({
   return useHover((hovered: boolean) => (
     <Link
       href={link.url}
-      className={twMerge(
+      className={cn(
         'flex w-full items-center gap-4 rounded-medium py-2 text-2xl md:text-base',
         !isActiveLink && 'text-default-500 hover:text-foreground',
         idx === 0 && 'mt-8 md:mt-4',
diff --git a/app/ui/info-badge.tsx b/app/ui/info-text.tsx
similarity index 57%
rename from app/ui/info-badge.tsx
rename to app/ui/info-text.tsx
index e08086f..875e6c1 100644
--- a/app/ui/info-badge.tsx
+++ b/app/ui/info-text.tsx
@@ -1,20 +1,27 @@
+import { cn } from '../lib/utils'
+
 type TProps = {
   id?: string
   text: string
   withAsterisk?: boolean
   withDoubleAsterisk?: boolean
+  isSm?: boolean
 }
 
-export default function InfoBadge({
+export default function InfoText({
   id,
   text,
   withAsterisk = true,
   withDoubleAsterisk = false,
+  isSm = false,
 }: TProps) {
   return (
     <p
       id={id}
-      className='text-xxs text-default-300 md:text-xs md:hover:cursor-none md:hover:text-foreground'
+      className={cn(
+        'text-default-300 hover:cursor-none hover:text-foreground',
+        isSm ? 'text-sm' : 'text-xxs md:text-xs',
+      )}
     >
       {withDoubleAsterisk && ' ** '}
       {!withDoubleAsterisk && withAsterisk && ' * '}
diff --git a/app/ui/logo.tsx b/app/ui/logo.tsx
index 2197126..315167a 100644
--- a/app/ui/logo.tsx
+++ b/app/ui/logo.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { Badge } from '@nextui-org/react'
-import { twMerge } from 'tailwind-merge'
+
+import { cn } from '../lib/utils'
 
 type TSize = 'sm' | 'md' | 'lg'
 
@@ -52,7 +53,7 @@ export default function Logo({
     >
       <div className='flex items-center justify-center'>
         <div
-          className={twMerge(
+          className={cn(
             'flex bg-logo-gradient text-background',
             logoSizeClass,
             'items-center justify-center',
@@ -62,9 +63,9 @@ export default function Logo({
           )}
         >
           <span
-            className={twMerge(
-              textSizeClass,
+            className={cn(
               '-skew-x-6 transform-gpu cursor-default font-inter font-bold drop-shadow-lg',
+              textSizeClass,
             )}
           >
             Ex
diff --git a/app/ui/sign-in/sign-in.tsx b/app/ui/sign-in/sign-in.tsx
index fd95f5c..b64c7a1 100644
--- a/app/ui/sign-in/sign-in.tsx
+++ b/app/ui/sign-in/sign-in.tsx
@@ -35,7 +35,7 @@ import {
 
 import ClientButton from '../default-button'
 import { HoverableElement } from '../hoverables'
-import InfoBadge from '../info-badge'
+import InfoText from '../info-text'
 import Logo from '../logo'
 
 const ACCORDION_ITEM_KEY = 'More'
@@ -217,8 +217,8 @@ function SignIn() {
         </div>
       </div>
       <div className='mt-4 flex flex-col gap-2 text-center'>
-        <InfoBadge text='Your name and email will be visible on the site and serve as your primary identifiers.' />
-        <InfoBadge text='Signing in does not create an account.' />
+        <InfoText text='Your name and email will be visible on the site and serve as your primary identifiers.' />
+        <InfoText text='Signing in does not create an account.' />
       </div>
     </div>
   )
diff --git a/app/ui/transaction-form-edit.tsx b/app/ui/transaction-form-edit.tsx
index cf0d3e5..875f877 100644
--- a/app/ui/transaction-form-edit.tsx
+++ b/app/ui/transaction-form-edit.tsx
@@ -32,7 +32,7 @@ import {
   getTransactionsWithChangedCategory,
 } from '../lib/utils'
 import Loading from '../loading'
-import InfoBadge from './info-badge'
+import InfoText from './info-text'
 
 const AMOUNT_LENGTH = 6
 
@@ -269,8 +269,8 @@ function TransactionFormEdit({ transaction }: TProps) {
       </form>
       {isTransactionWithChangedCategory && (
         <div className='mt-2 flex flex-col gap-2'>
-          <InfoBadge text='Looks like you have changed the category data. Please select an existing one.' />
-          <InfoBadge text={`Your previous category was: ${prevCategory}.`} />
+          <InfoText text='Looks like you have changed the category data. Please select an existing one.' />
+          <InfoText text={`Your previous category was: ${prevCategory}.`} />
         </div>
       )}
     </>
diff --git a/app/ui/transaction-list.tsx b/app/ui/transaction-list.tsx
index 6eb5272..a30a9bb 100644
--- a/app/ui/transaction-list.tsx
+++ b/app/ui/transaction-list.tsx
@@ -12,6 +12,7 @@ import type {
   TTransaction,
 } from '../lib/types'
 import { getFormattedCurrency } from '../lib/utils'
+import InfoText from './info-text'
 
 type TProps = {
   groupedTransactionsByDate: TGroupedTransactions
@@ -26,34 +27,40 @@ function TransactionList({
   transactionsWithChangedCategory,
   currency,
 }: TProps) {
-  const totalsWrapper =
-    'flex items-center gap-1 text-default-300 md:hover:text-foreground'
-
   return (
     <>
       {Object.keys(groupedTransactionsByDate)?.map((date) => {
         const { income, expense } = totalsTransactionsByDate[date]
 
+        const incomeIcon = <PiArrowCircleUpFill className='fill-success' />
+        const expenseIcon = <PiArrowCircleDownFill className='fill-danger' />
+        const totalsWrapper = 'flex items-center gap-1'
+        const totalsCurrency = currency?.code || DEFAULT_CURRENCY_CODE
+
         return (
           <div key={date} className='mx-auto max-w-3xl'>
             <div className='flex items-center justify-between p-2 text-default-500'>
-              <p className='text-sm text-default-300 md:hover:cursor-none md:hover:text-foreground'>
-                {date}
-              </p>
-              <div className='flex gap-2 text-sm md:hover:cursor-none'>
+              <InfoText text={date} withAsterisk={false} isSm />
+              <div className='flex gap-2 text-sm hover:cursor-none'>
                 {income > 0 && (
-                  <p className={totalsWrapper}>
-                    <PiArrowCircleUpFill className='fill-success' />
-                    {getFormattedCurrency(income)}{' '}
-                    {currency?.code || DEFAULT_CURRENCY_CODE}
-                  </p>
+                  <div className={totalsWrapper}>
+                    {incomeIcon}
+                    <InfoText
+                      text={`${getFormattedCurrency(income)} ${totalsCurrency}`}
+                      withAsterisk={false}
+                      isSm
+                    />
+                  </div>
                 )}
                 {expense > 0 && (
-                  <p className={totalsWrapper}>
-                    <PiArrowCircleDownFill className='fill-danger' />
-                    {getFormattedCurrency(expense)}{' '}
-                    {currency?.code || DEFAULT_CURRENCY_CODE}
-                  </p>
+                  <div className={totalsWrapper}>
+                    {expenseIcon}
+                    <InfoText
+                      text={`${getFormattedCurrency(expense)} ${totalsCurrency}`}
+                      withAsterisk={false}
+                      isSm
+                    />
+                  </div>
                 )}
               </div>
             </div>