├── ReportButton.jsx
└── ReportButton.module.css


/ReportButton.jsx:
--------------------------------------------------------------------------------
 1 | import React, { memo } from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { MdPlayArrow } from 'react-icons/md';
 4 | import classes from './ReportButton.module.css';
 5 | 
 6 | export const ReportButton = memo(({ text, link }) => {
 7 |   return (
 8 |     <Link
 9 |       className={`${classes.dashboardButton} ${classes.dashboardSqsBtn}`}
10 |       to={link}
11 |     >
12 |       {text}
13 |       <MdPlayArrow className={classes.dashboardSqsBtnIcon} />
14 |     </Link>
15 |   );
16 | });
17 | 


--------------------------------------------------------------------------------
/ReportButton.module.css:
--------------------------------------------------------------------------------
 1 | .dashboardButton {
 2 |   background-color: var(--secondary-color);
 3 |   color: var(--ground_color);
 4 |   border-radius: 5px;
 5 |   font-weight: 600;
 6 |   padding: 10px 20px;
 7 |   box-shadow: 2px 2px 5px var(--disable-color);
 8 | }
 9 | 
10 | .dashboardButton:hover {
11 |   background-color: var(--secondary-hover);
12 |   box-shadow: 3px 3px 5px var(--disable-color);
13 | }
14 | 
15 | .dashboardSqsBtn {
16 |   background-color: #ee7a00;
17 |   cursor: pointer;
18 |   border: none;
19 |   border-radius: 17px;
20 |   display: flex;
21 |   align-items: center;
22 |   font-size: 16px;
23 |   padding: 8px 30px;
24 |   font-weight: 500;
25 |   margin-left: auto;
26 |   margin-right: auto;
27 |   margin-bottom: 20px;
28 | }
29 | 
30 | .dashboardSqsBtn:hover {
31 |   background-color: #ee7a00;
32 | }
33 | 
34 | .dashboardSqsBtnIcon {
35 |   margin-left: 5px;
36 |   font-size: 24px;
37 | }
38 | 


--------------------------------------------------------------------------------