55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import {BlacklistItem} from "~/classes/blacklistItem";
|
|
import {Button, CircularProgress} from "@mui/material";
|
|
import useWindowDimensions from "~/hooks/windowDimensions";
|
|
import trimLink from "~/functions/trimLink";
|
|
|
|
export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
|
|
if (isFetching){
|
|
return(
|
|
<div className="loader">
|
|
<CircularProgress aria-label="Loading…" />
|
|
</div>
|
|
)
|
|
} else {
|
|
if (blacklistItems.length > 0){
|
|
const { width } = useWindowDimensions();
|
|
return (
|
|
<div className="list-container">
|
|
<div className="item-list">
|
|
{blacklistItems.map((item) => {
|
|
let summary = (item.afk + item.cheater + item.griefer + item.toxic + item.useless + item.smurf) / 6;
|
|
let color = 'rgb(255 255 255 / 17%)';
|
|
if (summary < 1){
|
|
color = 'rgba(48,255,0,0.1)';
|
|
} else if (summary >= 1 && summary <= 2) {
|
|
color = 'rgba(255,235,0,0.1)';
|
|
} else if (summary > 2 && summary <= 3) {
|
|
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>
|
|
)
|
|
} else {
|
|
return (
|
|
<div className="list-container">
|
|
<p style={{color: '#E0E3E7'}}>List is empty</p>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
} |