Move RoleLine to its own component

frontend/src/components/roleLine/index.tsx

+import { Button, TableCell, TableRow } from '@mui/material'
+import { Role } from 'interfaces'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { format } from 'date-fns'
+
+interface RoleLineProps {
+  role: Role
+  pid: string
+}
+const RoleLine = ({ role, pid }: RoleLineProps) => {
+  const [t, i18n] = useTranslation('common')
+  console.log(role)
+  return (
+    <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+      <TableCell align="left">
+        {i18n.language === 'en' ? role.name_en : role.name_nb}
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
+        {format(role.end_date, 'yyyy-MM-dd')}
+      </TableCell>
+      <TableCell align="left">
+        {i18n.language === 'en' ? role.ou_en : role.ou_nb}
+      </TableCell>
+      <TableCell>
+        <Button
+          variant="contained"
+          component={Link}
+          to={`/sponsor/guest/${pid}/roles/${role.id}`}
+        >
+          {t('sponsor.choose')}
+        </Button>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+interface UserRoleLineProps {
+  role: Role
+}
+export const UserRoleLine = ({ role }: UserRoleLineProps) => {
+  const [, i18n] = useTranslation('common')
+  console.log(role)
+  return (
+    <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+      <TableCell align="left">
+        {i18n.language === 'en' ? role.name_en : role.name_nb}
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
+        {format(role.end_date, 'yyyy-MM-dd')}
+      </TableCell>
+      <TableCell align="left">
+        {i18n.language === 'en' ? role.ou_en : role.ou_nb}
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export default RoleLine

frontend/src/routes/sponsor/guest/guestInfo/index.tsx

 import { Link, useParams, useHistory } from 'react-router-dom'
 
 import Page from 'components/page'
+import RoleLine from 'components/roleLine'
 import { useTranslation } from 'react-i18next'
 import {
   Button,
@@ -20,8 +21,7 @@ import {
 } from '@mui/material'
 import { Guest, Role } from 'interfaces'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
-import { format } from 'date-fns'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { isValidEmail, submitJsonOpts } from '../../../../utils'
 
@@ -29,11 +29,6 @@ type GuestInfoParams = {
   pid: string
 }
 
-interface RoleLineProps {
-  role: Role
-  pid: string
-}
-
 type GuestInfoProps = {
   guest: Guest
   roles: Role[]
@@ -41,33 +36,6 @@ type GuestInfoProps = {
   resend: () => void
 }
 
-const RoleLine = ({ role, pid }: RoleLineProps) => {
-  const [t, i18n] = useTranslation('common')
-  return (
-    <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.name_en : role.name_nb}
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
-        {format(role.end_date, 'yyyy-MM-dd')}
-      </TableCell>
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.ou_en : role.ou_nb}
-      </TableCell>
-      <TableCell>
-        <Button
-          variant="contained"
-          component={Link}
-          to={`/sponsor/guest/${pid}/roles/${role.id}`}
-        >
-          {t('sponsor.choose')}
-        </Button>
-      </TableCell>
-    </TableRow>
-  )
-}
-
 type CancelConfirmationDialogProps = {
   open: boolean
   onClose: (ok: boolean) => void