quantstack.github.io/src/components/Blog.tsx at master · QuantStack/quantstack.github.io · GitHub

Repository navigation

32 lines (29 loc) · 961 Bytes

import React, { useState } from "react";

import CardGrid from "./layout/CardGrid";

import BlogpostCard from "./BlogpostCard";

import { blogpostsDetails } from "../pages/blogs/_blogpostsDetails";

import styles from "../pages/blog.module.css";

export default function BlogGrid() {

const [searchField, setSearchField] = useState("");

const filtered = blogpostsDetails.filter((blogpost) =>

[blogpost.title, blogpost.authors, blogpost.date, blogpost.summary]

.some((field) => field.toLowerCase().includes(searchField.toLowerCase()))

);

return (

<input

className={styles.search_input}

type="search"

placeholder="Search for blog posts"

onChange={(e) => setSearchField(e.target.value)}

{filtered.map((blogpost, index) => (

</li>

))}

</CardGrid>

</>

);

}