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();

  return (
    <Page>
      <Box display="flex" flexDirection="column" alignItems="center" padding={3}>
        <Box marginY={4}>
          <Typography variant="h4" color="textPrimary">
            A körről
          </Typography>
        </Box>
        <Box marginBottom={8}>
          <AboutCard />
        </Box>
        <Box marginY={4}>
          <Typography variant="h4" color="textPrimary">
            Aktív tagjaink
          </Typography>
        </Box>
        <Box marginBottom={8} display="flex" justifyContent="center" flexWrap="wrap">
          {!data || status === 'loading' ? <CircularProgress /> : <Members data={data} />}
        </Box>
        <Box marginY={4}>
          <Typography variant="h4" color="textPrimary">
            Galéria
          </Typography>
        </Box>
        <Gallery />
      </Box>
    </Page>
  );
};

export default AboutPage;