Mapping Pattern
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 |
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment