import { useState, useEffect } from 'react' import Head from 'next/head' import Workspace from '../components/Workspace' import styles from '../styles/Home.module.css' export default function Home({ searchText }) { const [workspaces, setWorkspaces] = useState(null) useEffect(() => { fetch('list.json') .then((res) => res.json()) .then((workspaces) => { setWorkspaces(workspaces) }) }, []) let filteredworkspaces = workspaces && workspaces.workspaces && workspaces.workspaces.length > 0 ? [...workspaces.workspaces] : []; const lowerSearch = searchText && searchText.toLowerCase(); if (searchText && searchText !== "") { filteredworkspaces = filteredworkspaces.filter((i) => { const category = (i.categories && i.categories.length > 0) ? i.categories.filter((i) => i.toLowerCase().includes(lowerSearch) ) : []; return ( i.name.toLowerCase().includes(lowerSearch) || category.length > 0 ); }); } return (

Kasm Workspaces

Workspaces: {workspaces && workspaces.workspacecount}

{filteredworkspaces && filteredworkspaces.length > 0 && filteredworkspaces.map(function (workspace, i) { return })} {filteredworkspaces && filteredworkspaces.length === 0 && (

No workspaces found {searchText !== '' && ('matching "' + searchText + '"')}

)}

) }