yusufipek/teknolojirehberleri.xyz
1
0
Fork 0
mirror of https://github.com/yusufipk/teknolojirehberleri.xyz.git synced 2026-09-11 10:56:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(create) created dummy posts and styled it

Browse Source
This commit is contained in:
Yusuf İpek
2021-08-07 14:52:17 +03:00
parent 55f7b9e9fb
commit df8e941c9f
4 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
commons/home.js
+11 -2
View File
@@ -1,3 +1,12 @@
export default function Home() {
return <div className="homepage"></div>;
export default function Home({ posts }) {
return (
<div className="homepage">
<h1 className="homepage_heading-1">Rehberler</h1>
<div className="homepage_posts">
{posts.slice(0, 20).map((post) => (
<li key={post.id}>{post.title}</li>
))}
</div>
</div>
);
}
pages/index.js
+13 -2
View File
@@ -1,7 +1,7 @@
import Head from "next/head";
import Home from "../commons/home";
export default function App() {
export default function App({ posts }) {
return (
<div>
<Head>
@@ -12,7 +12,18 @@ export default function App() {
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Home />
<Home posts={posts} />
</div>
);
}
export async function getStaticProps() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts = await res.json();
return {
props: {
posts,
},
};
}
styles/components/navbar.scss
+1 -1
View File
@@ -23,7 +23,7 @@
list-style-type: none;
li:not(:last-child) {
margin-right: 1rem;
margin-right: 2.5rem;
}
&-item {
styles/pages/homepage.scss
+22 -1
View File
@@ -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;
}
}
}