routing and fetching data

frontend_reactjs/src/pages/Roles.tsx

@@ -0,0 +1,26 @@
+import { useState} from 'react'
+import RoleCard from '../components/RoleCard'
+import Modal from '../components/Modal'
+import useDataFetching from '../components/FetchingData'
+
+interface IRoleCard{
+    id: number
+    name: string
+  }
+interface Props {
+    showModal: boolean;
+  }
+function Users() {
+  const [showModal, setShowModal] = useState<Props>({showModal: false});
+  const cards = useDataFetching<IRoleCard[]>("http://localhost:8000/auth/role/",[])
+  
+  return (
+    <div>
+      {cards.map((card, index) => <RoleCard key={index} {...card}/>)}
+      <button className='absolute w-0 h-0' onClick={() => setShowModal({showModal:true})}>+</button>
+      <Modal {...showModal}/>
+    </div>
+  )
+}
+
+export default Users