From df8e941c9f4d2afcd97a6b62c8d227a663d534ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sat, 7 Aug 2021 14:52:17 +0300 Subject: [PATCH] (create) created dummy posts and styled it --- commons/home.js | 13 +++++++++++-- pages/index.js | 15 +++++++++++++-- styles/components/navbar.scss | 2 +- styles/pages/homepage.scss | 23 ++++++++++++++++++++++- 4 files changed, 47 insertions(+), 6 deletions(-) diff --git a/commons/home.js b/commons/home.js index 436fed0..7639b01 100644 --- a/commons/home.js +++ b/commons/home.js @@ -1,3 +1,12 @@ -export default function Home() { - return
; +export default function Home({ posts }) { + return ( +
+

Rehberler

+
+ {posts.slice(0, 20).map((post) => ( +
  • {post.title}
    • + ))} +
    +
    + ); } diff --git a/pages/index.js b/pages/index.js index 970b3ad..e1bcd4d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,7 @@ import Head from "next/head"; import Home from "../commons/home"; -export default function App() { +export default function App({ posts }) { return (
    @@ -12,7 +12,18 @@ export default function App() { /> - +
    ); } + +export async function getStaticProps() { + const res = await fetch("https://jsonplaceholder.typicode.com/posts"); + const posts = await res.json(); + + return { + props: { + posts, + }, + }; +} diff --git a/styles/components/navbar.scss b/styles/components/navbar.scss index 090b279..c4e598a 100644 --- a/styles/components/navbar.scss +++ b/styles/components/navbar.scss @@ -23,7 +23,7 @@ list-style-type: none; li:not(:last-child) { - margin-right: 1rem; + margin-right: 2.5rem; } &-item { diff --git a/styles/pages/homepage.scss b/styles/pages/homepage.scss index fb3f6a0..4360219 100644 --- a/styles/pages/homepage.scss +++ b/styles/pages/homepage.scss @@ -1,3 +1,24 @@ .homepage { - height: 90vh; + font-size: 2rem; + list-style-type: none; + justify-items: center; + + display: grid; + justify-content: center; + + &_heading-1 { + text-align: center; + } + + &_posts { + display: grid; + grid-template-columns: repeat(3, 1fr); + width: 50%; + min-height: 100vh; + + li { + margin-top: 2rem; + text-align: center; + } + } }