routing and fetching data

frontend_reactjs/src/pages/Main.tsx

@@ -0,0 +1,3 @@
+export default function Main (){
+    return ( <><h1>Main page</h1></>)
+}

frontend_reactjs/src/pages/NotFound.tsx

@@ -0,0 +1,3 @@
+export default function NotFound (){
+    return ( <><h1>Page not found</h1></>)
+}

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

frontend_reactjs/src/pages/Users.tsx

@@ -0,0 +1,18 @@
+import Card from '../components/Card'
+import useDataFetching from '../components/FetchingData'
+interface ICard{
+  firstname: string
+  lastname: string
+  email: string
+}
+
+function Users() {
+  const cards= useDataFetching<ICard[]>("http://localhost:8000/auth/user/",[])
+  return (
+    <div>
+      {cards.map((card, index) => <Card key={index} {...card}/>)}
+    </div>
+  )
+}
+
+export default Users