48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { useDroppable } from '@dnd-kit/core';
|
|
import { darkenRgbColor } from '../tools/colors';
|
|
|
|
interface TierModalCategoryProps {
|
|
color: string;
|
|
textColor: string;
|
|
name: string;
|
|
}
|
|
|
|
export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryProps) => {
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: 'droppable:' + name,
|
|
data: { name },
|
|
});
|
|
const darkRGB = darkenRgbColor(color, 40);
|
|
|
|
const getTextColorCode = (textColor: string) => {
|
|
let text_color_code = '';
|
|
switch (textColor) {
|
|
case 'white':
|
|
text_color_code = '#dfe6e9';
|
|
break;
|
|
case 'black':
|
|
text_color_code = '#2d3436';
|
|
break;
|
|
default:
|
|
text_color_code = textColor;
|
|
}
|
|
return text_color_code;
|
|
};
|
|
|
|
const style = {
|
|
backgroundColor: isOver ? darkRGB : color,
|
|
color: getTextColorCode(textColor),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`md:w-32 md:min-h-32 w-16 min-h-16 flex justify-center items-center font-bold text-sm md:text-xl rounded-lg text-center`}
|
|
style={style}
|
|
key={name}
|
|
ref={setNodeRef}
|
|
>
|
|
{name}
|
|
</div>
|
|
);
|
|
};
|