v1

bioodev · Jan 11, 2023 · 202e4c8 · 202e4c8 · vercel · Jan 11, 2023
1 parent 4186a1b
commit 202e4c8
Show file tree

Hide file tree

Showing 21 changed files with 1,188 additions and 239 deletions.
diff --git a/app/about/page.jsx b/app/about/page.jsx
@@ -0,0 +1,11 @@
+export default function AboutPage() {
+    return (
+      <div className="container">
+        <h1>About</h1>
+        <p>A simple blog example with Jsonplaceholder API and Nexjs</p>
+        <a href="https://github.com/bioodev">Designed by Bioodev</a>
+
+      </div>
+    );
+  }
+
diff --git a/app/components/Footer.jsx b/app/components/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div className='container footer'><a href="https://github.com/bioodev">@bioodev</a></div>
+  )
+}
+
+export default Footer
diff --git a/app/components/Navbar.jsx b/app/components/Navbar.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Link from "next/link";
+import "./Navbar.module.css"
+
+const Navbar = () => {
+  const links = [
+    { label: "Home", route: "/", icon:"💎" },
+    { label: "Posts", route: "/posts", icon:"📄" },
+    { label: "About", route: "/about", icon:"💻" },
+  ];
+  return (
+    <>
+      <nav className="container">
+        <ul className="navlist">
+          {links.map(({ label, route, icon }) => (
+            <li key={route}>
+              <Link href={route}>{icon} {label}</Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/app/components/Navbar.module.css b/app/components/Navbar.module.css
@@ -0,0 +1,13 @@
+
+.nav{
+    background-color: black;
+    display: inline-flex;
+}
+.nav li{
+    background-color: black;
+    display: inline-flex;
+}
+.nav li a{
+    background-color: black;
+    display: inline-flex;
+}
diff --git a/app/head.js b/app/head.js
@@ -0,0 +1,9 @@
+export default function Head() {
+    return (
+      <>
+        <title>srndp</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1"  />
+      </>
+    );
+  }
+
diff --git a/app/layout.js b/app/layout.js
@@ -0,0 +1,20 @@
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+import "../styles/globals.css"
+export default function RootLayout({ children }) {
+
+  return (
+    <html lang="es">
+      <head />
+      <body>
+        <header>
+          <Navbar />
+        </header>
+        {children}
+        <footer>
+          <Footer />
+        </footer>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.js b/app/page.js
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <div className="container">
+      <h1>🏴 Blog</h1>
+      <h3>A simple example blog with Nextjs and API</h3>
+      <Link className="button" href={"/posts"}>Check list of posts</Link>
+    </div>
+  );
+}
diff --git a/app/posts/ListOfPosts.jsx b/app/posts/ListOfPosts.jsx
@@ -0,0 +1,20 @@
+import Link from "next/link"
+const fetchPosts = () => {
+    return fetch("https://jsonplaceholder.typicode.com/users/1/posts")
+        .then(res => res.json())
+        .catch(err => console.log(err))
+}
+
+export async function ListOfPosts() {
+    const posts = await fetchPosts()
+    return posts.slice(0, 15).map(post => (
+        <Link className="articles" href={`/posts/${post.id}`} key={post.id}>
+            <h2>
+                {post.title}
+            </h2>
+            <p>
+                {post.body}
+            </p>
+        </Link>
+    ))
+}
diff --git a/app/posts/[id]/PostDetail.jsx b/app/posts/[id]/PostDetail.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+export async function PostDetail({ id }) {
+  const fetchPost = () => {
+    return fetch(`https://jsonplaceholder.typicode.com/users/1/posts?id=${id}`)
+      .then((res) => res.json())
+      .catch((err) => console.log(err));
+  };
+  const post = await fetchPost();
+  const { title, body } = post[0];
+  console.log(id);
+  console.log(post);
+  console.log(title);
+  return (
+    <div className="container">
+      {title && body && (
+        <>
+          <h1>{title}</h1>
+          <div>{body}</div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/app/posts/[id]/page.jsx b/app/posts/[id]/page.jsx
@@ -0,0 +1,11 @@
+import { PostDetail } from "./PostDetail";
+
+export default function PostsPage({ params }) {
+  const { id } = params;
+
+  return (
+    <>
+      <PostDetail id={id} />
+    </>
+  );
+}
diff --git a/app/posts/page.jsx b/app/posts/page.jsx
@@ -0,0 +1,11 @@
+import { ListOfPosts } from "./ListOfPosts";
+
+export default function PostsPage() {
+    return (
+      <div className="container postslist">
+        <h1>Blog posts</h1>
+        <ListOfPosts />
+      </div>
+    );
+  }
+
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    appDir: true
+  },
   reactStrictMode: true,
 }