33 lines
992 B
TypeScript
33 lines
992 B
TypeScript
import React from "react";
|
|
import { Service } from "../../types";
|
|
import Grid from "@mui/material/Unstable_Grid2";
|
|
import ServiceCard from "./ServiceCard";
|
|
import { useGlobalState } from "../../GlobalStateProvider";
|
|
|
|
interface ServiceListProps {
|
|
services: Service[];
|
|
}
|
|
|
|
export default function ServiceList({ services }: ServiceListProps) {
|
|
const { state } = useGlobalState();
|
|
|
|
const serviceItems = services
|
|
.filter(
|
|
(service) =>
|
|
!state.searchFilter || service.name.toLocaleLowerCase().includes(state.searchFilter.toLocaleLowerCase())
|
|
)
|
|
.map((service) => {
|
|
return (
|
|
<Grid key={service.name} sx={{ display: "flex" }}>
|
|
<ServiceCard service={service} />
|
|
</Grid>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
|
|
{serviceItems}
|
|
</Grid>
|
|
);
|
|
}
|