feature: добавил цвета при наведении на элемент списка
This commit is contained in:
parent
8a8d90e03a
commit
602a391102
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue