fetched some posts

routes/index.tsx

@@ -1,7 +1,19 @@
 /** @jsx h */
 import { h } from "preact";
 
-export default function Home() {
+export const handler: Handlers<Project> = {
+  async GET(_req, ctx) {
+    const myposts =await fetch("https://jsonplaceholder.typicode.com/posts")
+    const posts = await myposts.json()
+    if (!posts) {
+      return new Response("Project not found", { status: 404 });
+    }
+    return ctx.render(posts);
+  },
+};
+
+export default function Home(props) {
+  const posts = props.data
   return (
     <div>
       <a href="https://www.active-connector.com/">
@@ -13,6 +25,11 @@ export default function Home() {
       <h2>
         Skill Test (Software Engineer)
       </h2>
+      <ul>
+        {posts.map(post => {
+          return <li><a href={`/posts/${post.id}`}>{post.title}</a></li>
+        })}
+      </ul>
     </div>
   );
 }

routes/posts/[id].tsx

@@ -0,0 +1,24 @@
+/** @jsx h */
+import { h } from "preact";
+import { PageProps } from "$fresh/server.ts";
+export const handler: Handlers<Project> = {
+  async GET(_req, ctx) {
+    const id = ctx.params.id;
+    const rawPost = await fetch(
+      `https://jsonplaceholder.typicode.com/posts/${id}`
+    );
+    const post = await rawPost.json();
+    if (!post) {
+      return new Response("Project not found", { status: 404 });
+    }
+    return ctx.render(post);
+  },
+};
+export default function Post(props: PageProps) {
+  return (
+    <div>
+      <h1> {props.data.title}</h1>
+      <p>{props.data.body}</p>
+    </div>
+  );
+}