feature: добавил цвета при наведении на элемент списка

This commit is contained in:
dhaverd 2026-07-14 10:56:01 +08:00
parent 8a8d90e03a
commit 602a391102
2 changed files with 26 additions and 4 deletions

View File

@ -1,11 +1,11 @@
export default function Tag({tag, name}:{tag: number|undefined, name: string}){ export default function Tag({tag, name}:{tag: number|undefined, name: string}){
let classColor = "report-tag-count-good"; let classColor = "report-tag-count-good";
if (tag){ if (tag){
if (tag <= 10){ if (tag < 2){
classColor = "report-tag-count-good"; classColor = "report-tag-count-good";
} else if (tag > 10 && tag <= 25) { } else if (tag >= 2 && tag <= 4) {
classColor = "report-tag-count-ok"; classColor = "report-tag-count-ok";
} else if (tag > 25 && tag <= 50) { } else if (tag > 4 && tag <= 10) {
classColor = "report-tag-count-bad"; classColor = "report-tag-count-bad";
} else { } else {
classColor = "report-tag-count-very-bad"; classColor = "report-tag-count-very-bad";

View File

@ -17,7 +17,29 @@ export default function ItemList({ isFetching, blacklistItems, showDialog }: { i
<div className="list-container"> <div className="list-container">
<div className="item-list"> <div className="item-list">
{blacklistItems.map((item) => { {blacklistItems.map((item) => {
return <Button onClick={() => showDialog(item)} variant="text">{width < 570 ? trimLink(item.link) : item.link} | {item.nicknames[item.nicknames.length - 1]}</Button> let summary = item.afk + item.cheater + item.griefer + item.cheater + item.useless + item.smurf;
let color = 'rgb(255 255 255 / 17%)';
if (summary < 2){
color = 'rgba(48,255,0,0.1)';
} else if (summary >= 2 && summary <= 4) {
color = 'rgba(255,235,0,0.1)';
} else if (summary > 4 && summary <= 10) {
color = 'rgba(255,136,0,0.1)';
} else {
color = 'rgba(255,0,0,0.1)';
}
return <Button
onClick={() => showDialog(item)}
variant="text"
sx={{
margin: '3px 5px',
'&:hover': {
backgroundColor: color
}
}}
>
{width < 570 ? trimLink(item.link) : item.link} | {item.nicknames[item.nicknames.length - 1]}
</Button>
})} })}
</div> </div>
</div> </div>