convert to components

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -1,19 +1,22 @@
 "use client";
 import React, { useState } from "react";
 import styles from "./styles.module.css";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useParams } from "next/navigation";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
   return (
     <div className={styles.container}>
       <div className={styles.title}>
-        {pathName.includes("/view") && props.state === "view" && (
+        {((pathName.includes("/view") && props.state === "view") ||
+          params.usersId ||
+          params.roleId) && (
           <div onClick={() => router.back()}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +28,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12H19"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -33,7 +35,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 18"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -41,7 +42,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 6"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"