File size: 2,161 Bytes
390e277 e9c0734 0d21acd b73b7f6 e9c0734 0d21acd b73b7f6 e9c0734 0d21acd b73b7f6 e9c0734 0d21acd b73b7f6 e9c0734 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd b73b7f6 0d21acd e9c0734 b9b05e2 e9c0734 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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-indigo-700',
iconBg: 'bg-indigo-200',
},
teal: {
bg: 'bg-teal-50',
text: 'text-teal-900',
gradient: 'bg-gradient-to-br from-teal-500 to-teal-700',
iconBg: 'bg-teal-200',
},
rose: {
bg: 'bg-rose-50',
text: 'text-rose-900',
gradient: 'bg-gradient-to-br from-rose-500 to-rose-700',
iconBg: 'bg-rose-200',
},
amber: {
bg: 'bg-amber-50',
text: 'text-amber-900',
gradient: 'bg-gradient-to-br from-amber-500 to-amber-700',
iconBg: 'bg-amber-200',
},
purple: {
bg: 'bg-purple-50',
text: 'text-purple-900',
gradient: 'bg-gradient-to-br from-purple-500 to-purple-700',
iconBg: 'bg-purple-200',
},
blue: {
bg: 'bg-blue-50',
text: 'text-blue-900',
gradient: 'bg-gradient-to-br from-blue-500 to-blue-700',
iconBg: 'bg-blue-200',
},
emerald: {
bg: 'bg-emerald-50',
text: 'text-emerald-900',
gradient: 'bg-gradient-to-br from-emerald-500 to-emerald-700',
iconBg: 'bg-emerald-200',
},
fuchsia: {
bg: 'bg-fuchsia-50',
text: 'text-fuchsia-900',
gradient: 'bg-gradient-to-br from-fuchsia-500 to-fuchsia-700',
iconBg: 'bg-fuchsia-200',
},
lime: {
bg: 'bg-lime-50',
text: 'text-lime-900',
gradient: 'bg-gradient-to-br from-lime-500 to-lime-700',
iconBg: 'bg-lime-200',
},
sky: {
bg: 'bg-sky-50',
text: 'text-sky-900',
gradient: 'bg-gradient-to-br from-sky-500 to-sky-700',
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',
};
}; |