Add Members component in about page

src/pages/AboutPage.tsx

 import { Box, CircularProgress, Typography } from '@material-ui/core';
 import React from 'react';
+import { StaffResponse } from '../client/types';
 import AboutCard from '../components/AboutCard';
 import Gallery from '../components/Gallery';
 import MemberCard from '../components/MemberCard';
 import useGetStaff from '../hooks/useGetStaffs';
 import Page from './Page';
 
+const Members: React.FC<{ data: StaffResponse }> = ({ data }) => {
+  if (data.length === 0) {
+    return <Typography>Nincs találat</Typography>;
+  }
+  return (
+    <>
+      {data?.map((m) => (
+        <Box m={3} key={m.email}>
+          <MemberCard
+            name={m.name}
+            email={m.email}
+            acceptedPicture={m.acceptedPicture}
+            staffMemberText={m.staffMemberText}
+          />
+        </Box>
+      ))}
+    </>
+  );
+};
+
 const AboutPage: React.FC = () => {
   const { data, status } = useGetStaff();
 
@@ -26,20 +47,7 @@ const AboutPage: React.FC = () => {
           </Typography>
         </Box>
         <Box marginBottom={8} display="flex" justifyContent="center" flexWrap="wrap">
-          {!data || status === 'loading' ? (
-            <CircularProgress />
-          ) : (
-            data?.map((m) => (
-              <Box m={3} key={m.email}>
-                <MemberCard
-                  name={m.name}
-                  email={m.email}
-                  acceptedPicture={m.acceptedPicture}
-                  staffMemberText={m.staffMemberText}
-                />
-              </Box>
-            ))
-          )}
+          {!data || status === 'loading' ? <CircularProgress /> : <Members data={data} />}
         </Box>
         <Box marginY={4}>
           <Typography variant="h4" color="textPrimary">