Intis/pingator
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Global search filter

Browse Source
This commit is contained in:
Eden Kirin
2024-01-28 10:35:01 +01:00
parent 858f42c39b
commit b1f7d8196a
7 changed files with 120 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/dashboard/ServiceList.tsx
View File

@ -2,19 +2,27 @@ 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 serviceItems = services.map((service) => {
return (
<Grid key={service.name} sx={{ display: "flex" }}>
<ServiceCard service={service} />
</Grid>
);
});
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" }}>