frontPanel/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx

import { Box, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import { PartnerItem } from "./PartnerItem/PartnerItem";

export type Partner = {
  name: string;
  logo?: string;
  category: string;
};

type PartnersBoardProps = {
  partners: Partner[];
  setIsModalOpen: (value: boolean) => void;
  setCompanyName: (value: string) => void;
};

export const PartnersBoard: FC<PartnersBoardProps> = ({
  partners,
  setIsModalOpen,
  setCompanyName,
}) => {
  const theme = useTheme();

  const partnersByCategory = partners.reduce(
    (acc, partner) => {
      (acc[partner.category] = acc[partner.category] || []).push(partner);
      return acc;
    },
    {} as Record<string, Partner[]>,
  );

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: { xs: "center", sm: "center", md: "start" },
      }}
    >
      {Object.entries(partnersByCategory).map(([category, partners]) => (
        <Box key={category}>
          <Typography
            variant="h6"
            sx={{
              textAlign: { xs: "center", sm: "start", md: "start" },
              lineHeight: "1",
              marginBottom: "12px",
            }}
          >
            {category}
          </Typography>
          <Box
            sx={{
              display: "flex",
              flexWrap: "wrap",
              justifyContent: { xs: "center", sm: "start", md: "start" },
            }}
          >
            {partners.map((partner) => (
              <PartnerItem
                key={partner.name}
                partner={partner}
                setIsModalOpen={setIsModalOpen}
                setCompanyName={setCompanyName}
              />
            ))}
          </Box>
        </Box>
      ))}
    </Box>
  );
};