Mapping Pattern

01_before.js

export const useColorName = (color: string): any => {
  const additionalColorClassNames = []
  const additionalTextColorClassNames = []
  switch (color) {
    case 'primary':
      additionalColorClassNames.push('bg-primary border-primary-light')
      break
    case 'secondary':
      additionalColorClassNames.push('bg-secondary border-secondary-light')
      break
    case 'tertiary':
      additionalColorClassNames.push('bg-tertiary border-tertiary-light')
      break
    case 'quaternary':
      additionalColorClassNames.push('bg-quaternary border-quaternary-light')
      break
    case 'quinary':
      additionalColorClassNames.push('bg-quinary border-quinary-light')
      break
    case 'gray':
      additionalColorClassNames.push('bg-gray border-gray-light')
      break
    default:
      additionalColorClassNames.push('bg-primary border-primary-light')
      break
  }

  return { additionalColorClassNames }
}

export default useColorName

02_after.js

const mappingColorClasses = {
  primary: 'bg-primary border-primary-light',
  secondary: 'bg-secondary border-secondary-light',
  tertiary: 'bg-tertiary border-tertiary-light',
  quaternary: 'bg-quaternary border-quaternary-light',
  quinary: 'bg-quinary border-quinary-light',
  gray: 'bg-gray border-gray-light',
}

export const useColorName = (color: keyof typeof mappingColorClasses): any => {
  const additionalColorClassNames =
    mappingColorClasses[color] || mappingColorClasses.primary

  return { additionalColorClassNames }
}

export default useColorName