cfahlgren1's picture
cfahlgren1 HF Staff
add a couple categories, improve look and feel
0d21acd
raw
history blame
2.16 kB
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export type ColorConfig = {
bg: string;
text: string;
gradient: string;
iconBg: string;
};
export const colorConfigs: Record<string, ColorConfig> = {
indigo: {
bg: 'bg-indigo-50',
text: 'text-indigo-900',
gradient: 'bg-gradient-to-br from-indigo-500 to-purple-600',
iconBg: 'bg-indigo-200',
},
teal: {
bg: 'bg-teal-50',
text: 'text-teal-900',
gradient: 'bg-gradient-to-br from-teal-400 to-emerald-600',
iconBg: 'bg-teal-200',
},
rose: {
bg: 'bg-rose-50',
text: 'text-rose-900',
gradient: 'bg-gradient-to-br from-rose-400 to-pink-600',
iconBg: 'bg-rose-200',
},
amber: {
bg: 'bg-amber-50',
text: 'text-amber-900',
gradient: 'bg-gradient-to-br from-amber-400 to-orange-500',
iconBg: 'bg-amber-200',
},
purple: {
bg: 'bg-purple-50',
text: 'text-purple-900',
gradient: 'bg-gradient-to-br from-purple-400 to-indigo-600',
iconBg: 'bg-purple-200',
},
blue: {
bg: 'bg-blue-50',
text: 'text-blue-900',
gradient: 'bg-gradient-to-br from-blue-400 to-cyan-600',
iconBg: 'bg-blue-200',
},
emerald: {
bg: 'bg-emerald-50',
text: 'text-emerald-900',
gradient: 'bg-gradient-to-br from-emerald-400 to-green-600',
iconBg: 'bg-emerald-200',
},
fuchsia: {
bg: 'bg-fuchsia-50',
text: 'text-fuchsia-900',
gradient: 'bg-gradient-to-br from-fuchsia-400 to-pink-600',
iconBg: 'bg-fuchsia-200',
},
lime: {
bg: 'bg-lime-50',
text: 'text-lime-900',
gradient: 'bg-gradient-to-br from-lime-400 to-green-500',
iconBg: 'bg-lime-200',
},
sky: {
bg: 'bg-sky-50',
text: 'text-sky-900',
gradient: 'bg-gradient-to-br from-sky-400 to-blue-600',
iconBg: 'bg-sky-200',
},
};
export const getColorConfig = (colorName: string): ColorConfig => {
return colorConfigs[colorName] || {
bg: 'bg-gray-200',
text: 'text-gray-800',
gradient: 'bg-gradient-to-br from-gray-500 to-gray-700',
iconBg: 'bg-gray-200',
};
};