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

app/assets/styles/home.css

@@ -79,3 +79,12 @@
     background-color: #383d49;
     cursor: default;
 }
+
+.report-content-header {
+    font-weight: bold;
+}
+
+.report-title-header {
+    display: flex;
+    justify-content: space-between;
+}

app/components/itemDialog.tsx

@@ -1,84 +1,9 @@
 import type {BlacklistItem} from "~/classes/blacklistItem";
-import {List, Dialog, DialogContent, DialogTitle, ListItem, ListItemText, Divider} from "@mui/material";
+import {Dialog, DialogContent, DialogTitle, Divider} from "@mui/material";
-
+import NicknameList from "~/components/itemDialog/nicknameList";
-function NicknameList({nicknames}: {nicknames: string[]|undefined}){
+import CommentsList from "~/components/itemDialog/commentsList";
-    if (!nicknames){
+import TagList from "~/components/itemDialog/tagList";
-        return (<></>)
+import TitleHeader from "~/components/itemDialog/titleHeader";
-    }
-    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>
-        </>
-    )
-}
 
 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}

app/components/itemDialog/commentsList.tsx

@@ -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 (<></>)
+    }
+}

app/components/itemDialog/nicknameList.tsx

@@ -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 (<></>)
+    }
+}

app/components/itemDialog/tag.tsx

@@ -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>
+        </>
+    )
+}

app/components/itemDialog/tagList.tsx

@@ -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>
+        </>
+    )
+}

app/components/itemDialog/titleHeader.tsx

@@ -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>
+        </>
+    )
+}