felix/packlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: dynamic tag colors in ItemRow component

Browse source
This commit is contained in:
Felix Zett 2025-09-14 19:59:52 +02:00
parent 2187045add
commit 1135f3b7a8
1 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/ItemRow.tsx
View file

@ -10,6 +10,19 @@ interface ItemRowProps {
onDeleteItem: (itemId: string) => void;
}
const TAG_COLORS = [
"bg-blue-200 text-blue-900",
"bg-green-200 text-green-900",
"bg-yellow-200 text-yellow-900",
"bg-pink-200 text-pink-900",
"bg-purple-200 text-purple-900",
"bg-orange-200 text-orange-900",
"bg-teal-200 text-teal-900",
"bg-red-200 text-red-900",
"bg-indigo-200 text-indigo-900",
"bg-lime-200 text-lime-900",
];
export default function ItemRow({
item,
allTags,
@ -93,7 +106,7 @@ export default function ItemRow({
{item.tags.map((tag) => (
<span
key={tag.id}
className="bg-gray-200 text-sm rounded px-1 py-0.5 flex items-center"
className={`${getTagColor(tag.id)} text-sm rounded px-1 py-0.5 flex items-center`}
>
#{tag.name}
{hover && (
@ -172,3 +185,12 @@ export default function ItemRow({
</li>
);
}
function getTagColor(tagId: string) {
// Simple hash: sum char codes
let hash = 0;
for (let i = 0; i < tagId.length; i++) {
hash = (hash + tagId.charCodeAt(i)) % TAG_COLORS.length;
}
return TAG_COLORS[hash];
}