FilesExpand file tree

 master

/

Blog.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

32 lines (29 loc) · 961 Bytes

 master

/

Blog.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

32 lines (29 loc) · 961 Bytes

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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)}

/>

<CardGrid cols={3}>

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

<li key={index}>

<BlogpostCard blogpost={blogpost} />

</li>

))}

</CardGrid>

</>

);

}