Dhaverd/ hunt-blacklist-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Разбил на компоненты

This commit is contained in:
Dhaverd 2026-05-08 23:34:05 +08:00
parent 9d7d82b76b
commit 50aedc1744
7 changed files with 111 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/styles/home.css
View File

@ -78,4 +78,13 @@
.report-nickname:hover {
background-color: #383d49;
cursor: default;
}
.report-content-header {
font-weight: bold;
}
.report-title-header {
display: flex;
justify-content: space-between;
}

87
app/components/itemDialog.tsx
View File

@ -1,84 +1,9 @@
import type {BlacklistItem} from "~/classes/blacklistItem";
import {List, Dialog, DialogContent, DialogTitle, ListItem, ListItemText, Divider} from "@mui/material";
function NicknameList({nicknames}: {nicknames: string[]|undefined}){
if (!nicknames){
return (<></>)
}
if (nicknames.length > 0){
return (
<>
<p>Nicknames:</p>
<List>
{nicknames.map((item) => {
return <ListItem className="report-nickname">{item}</ListItem>
})}
</List>
</>
)
} else {
return (<></>)
}
}
function CommentsList({comments}: {comments: string[]|undefined}){
if (!comments){
return (<></>)
}
if (comments.length > 0){
return (
<>
<p>Comments:</p>
<List>
{comments.map((item) => {
return <ListItem className="report-comment">{item}</ListItem>
})}
</List>
</>
)
} else {
return (<></>)
}
}
function Tag({tag, name}:{tag: number|undefined, name: string}){
let classColor = "report-tag-count-good";
if (tag){
if (tag <= 10){
classColor = "report-tag-count-good";
} else if (tag > 10 && tag <= 25) {
classColor = "report-tag-count-ok";
} else if (tag > 25 && tag <= 50) {
classColor = "report-tag-count-bad";
} else {
classColor = "report-tag-count-very-bad";
}
}
return (
<>
<div className="report-tag">
<span className={classColor}>{tag} </span>
<span>{name}</span>
</div>
</>
)
}
function TagList({afk, cheater, griefer, toxic, useless, smurf}:{afk: number|undefined, cheater: number|undefined, griefer: number|undefined, toxic: number|undefined, useless: number|undefined, smurf: number|undefined}){
return (
<>
<div className="report-tag-list">
<Tag tag={afk} name={'AFK'}/>
<Tag tag={cheater} name={'Cheater'}/>
<Tag tag={griefer} name={'Griefer'}/>
<Tag tag={toxic} name={'Toxic'}/>
<Tag tag={useless} name={'Useless'}/>
<Tag tag={smurf} name={'Smurf'}/>
</div>
</>
)
}
import {Dialog, DialogContent, DialogTitle, Divider} from "@mui/material";
import NicknameList from "~/components/itemDialog/nicknameList";
import CommentsList from "~/components/itemDialog/commentsList";
import TagList from "~/components/itemDialog/tagList";
import TitleHeader from "~/components/itemDialog/titleHeader";
export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
return (
@ -87,7 +12,7 @@ export default function ItemDialog({ blacklistItem, open, handleClose }: { black
onClose={() => handleClose()}
>
<DialogTitle>
<p>{blacklistItem?.link}</p>
<TitleHeader name={blacklistItem?.link} handleClose={handleClose}/>
<TagList
afk={blacklistItem?.afk}
cheater={blacklistItem?.cheater}

21
app/components/itemDialog/commentsList.tsx Normal file
View File

@ -0,0 +1,21 @@
import {List, ListItem} from "@mui/material";
export default function CommentsList({comments}: {comments: string[]|undefined}){
if (!comments){
return (<></>)
}
if (comments.length > 0){
return (
<>
<p className="report-content-header">Comments:</p>
<List>
{comments.map((item) => {
return <ListItem className="report-comment">{item}</ListItem>
})}
</List>
</>
)
} else {
return (<></>)
}
}

21
app/components/itemDialog/nicknameList.tsx Normal file
View File

@ -0,0 +1,21 @@
import {List, ListItem} from "@mui/material";
export default function NicknameList({nicknames}: {nicknames: string[]|undefined}){
if (!nicknames){
return (<></>)
}
if (nicknames.length > 0){
return (
<>
<p className="report-content-header">Nicknames:</p>
<List>
{nicknames.map((item) => {
return <ListItem className="report-nickname">{item}</ListItem>
})}
</List>
</>
)
} else {
return (<></>)
}
}

23
app/components/itemDialog/tag.tsx Normal file
View File

@ -0,0 +1,23 @@
export default function Tag({tag, name}:{tag: number|undefined, name: string}){
let classColor = "report-tag-count-good";
if (tag){
if (tag <= 10){
classColor = "report-tag-count-good";
} else if (tag > 10 && tag <= 25) {
classColor = "report-tag-count-ok";
} else if (tag > 25 && tag <= 50) {
classColor = "report-tag-count-bad";
} else {
classColor = "report-tag-count-very-bad";
}
}
return (
<>
<div className="report-tag">
<span className={classColor}>{tag} </span>
<span>{name}</span>
</div>
</>
)
}

16
app/components/itemDialog/tagList.tsx Normal file
View File

@ -0,0 +1,16 @@
import Tag from "~/components/itemDialog/tag";
export default function TagList({afk, cheater, griefer, toxic, useless, smurf}:{afk: number|undefined, cheater: number|undefined, griefer: number|undefined, toxic: number|undefined, useless: number|undefined, smurf: number|undefined}){
return (
<>
<div className="report-tag-list">
<Tag tag={afk} name={'AFK'}/>
<Tag tag={cheater} name={'Cheater'}/>
<Tag tag={griefer} name={'Griefer'}/>
<Tag tag={toxic} name={'Toxic'}/>
<Tag tag={useless} name={'Useless'}/>
<Tag tag={smurf} name={'Smurf'}/>
</div>
</>
)
}

15
app/components/itemDialog/titleHeader.tsx Normal file
View File

@ -0,0 +1,15 @@
import {IconButton} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
export default function TitleHeader({ name, handleClose }:{ name: string|undefined, handleClose: Function }){
return (
<>
<div className="report-title-header">
<p>{name}</p>
<IconButton aria-label="Close">
<CloseIcon sx={{color: "#E0E3E7"}} onClick={() => handleClose()}/>
</IconButton>
</div>
</>
)
}