Blog page

app/blog/[...slug]/page.tsx

@@ -0,0 +1,4 @@
+export default function BlogPost() {
+  return <div>post</div>
+
+}

app/blog/loading.tsx

@@ -0,0 +1,3 @@
+export default function BlogLoader() {
+  return <div>...loading...</div>
+}

app/blog/page.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+import { getAllPosts } from "../../lib/cms"
+
+export default async function Blog() {
+  const posts = await getAllPosts()
+
+  return (
+    <div>
+      {posts.map((post) => (
+        // eslint-disable-next-line react/jsx-key
+        <Link href={`/blog/${post.slug}`}>
+          <div>
+            <h1>{post.title}</h1>
+        </div>
+        </Link>
+      ))}
+    </div>
+  )
+}

app/contact/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useState } from "react"
+
+export default  function Contact() {
+  const [email, setEmail] = useState('')
+  const handleSubmit = async (e: { preventDefault: () => void }) => { 
+    e.preventDefault()
+
+    await fetch('/api/contact', {
+      method: 'Post',
+      body: JSON.stringify({ email }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      }
+    })
+    console.log('hey')
+  }
+
+
+  return <div>
+
+    <form onSubmit={handleSubmit}>
+      <input type="email" required value={email} onChange={(e)=> setEmail(e.target.value)}/>
+    <button type = 'submit'>submit</button>
+
+    </form>
+  </div>
+}

app/layout.tsx

@@ -1,3 +1,5 @@
+import '../styles/global.css'
+
 export default function RootLayout({
   children,
 }: {

app/page.tsx

@@ -1,5 +1,16 @@
-
+import Link from 'next/link'
+import styles from '../styles/home.module.css'
 
 export default async function Home() {
-  return <div>hello</div>
+  return <div className={styles.home}>
+    <div>
+      <div> <h1>Hi, My name is  Manel </h1></div>
+      <div>
+      <Link href= "/blog">Check my blog</Link>
+      </div>
+      <div>
+        <Link href="/contact"> Contact me </Link>
+      </div>
+    </div>
+  </div> 
 }

lib/cms.ts

@@ -0,0 +1,19 @@
+const delay = (time: number | undefined) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(1)
+    }, time)
+  })
+}
+
+export const getAllPosts = async () => {
+  await delay(3000)
+
+  return new Array(10).fill(1).map((_, i) => {
+    return {
+      title: `This is post ${i}`,
+      slug: `this-is-post-${i}`,
+      body:' tiruri tirura'
+    }
+  })
+}

pages/api/contact.ts

@@ -0,0 +1,9 @@
+export default function handler(req, res) {
+//save to DB
+
+  console.log(req.body)
+
+  if (req.method === 'POST') {
+    res.json({message:"ok"})
+  }
+}

styles/global.css

@@ -1,3 +1,10 @@
+body, html {
+  margin:  0px;
+  padding: 0px;
+
+}
+
+
 * {
  box-sizing: border-box;
-}
+}

styles/home.module.css

@@ -0,0 +1,9 @@
+.home{
+  height: 100vh;
+  width: 100vw;
+  background: black;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}