CMU Coding Bootcamp
thecoded.prof
1import { posts } from "./lib/post";
2import { BlogPostList } from "./components/BlogPostList";
3import { Link } from "react-router";
4import { useState } from "react";
5
6export function App() {
7 const [searchBarDisplay, displaySearchBar] = useState(false);
8 return (
9 <>
10 <title>Posts</title>
11 <div className="w-screen p-5 flex flex-col items-center gap-10">
12 <nav className="flex justify-between items-center w-full sticky top-0 max-w-3xl">
13 <h1 className="text-3xl font-bold text-left">Blog App</h1>
14 {searchBarDisplay ? (
15 <>
16 <input
17 type="text"
18 placeholder="Search..."
19 className="border border-gray-300 rounded px-2 py-1"
20 onChange={(_e) => {
21 // Implement search functionality here
22 }}
23 />
24 <button
25 className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
26 onClick={() => displaySearchBar(false)}
27 >
28 Close
29 </button>
30 </>
31 ) : (
32 <button
33 className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center"
34 onClick={() => displaySearchBar(true)}
35 >
36 Search
37 </button>
38 )}
39 <div className="flex w-full justify-end items-center">
40 <Link to="/post" className="w-1/3">
41 <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
42 New Post
43 </div>
44 </Link>
45 </div>
46 </nav>
47 <div className="flex flex-col gap-4 md:grid md:grid-cols-3 items-center justify-between w-full">
48 <div className="flex w-full justify-end items-center">
49 <h1 className="text-5xl font-bold text-center">Posts</h1>
50 <Link to="/post" className="w-1/3">
51 <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
52 New Post
53 </div>
54 </Link>
55 </div>
56 </div>
57 <BlogPostList posts={posts} />
58 </div>
59 </>
60 );
61}