yusufipek/teknolojirehberleri.xyz
1
0
Fork 0
mirror of https://github.com/yusufipk/teknolojirehberleri.xyz.git synced 2026-09-11 19:06:07 +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() { export default function Home({ posts }) {
return <div className="homepage"></div>; 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 Head from "next/head";
import Home from "../commons/home"; import Home from "../commons/home";
export default function App() { export default function App({ posts }) {
return ( return (
<div> <div>
<Head> <Head>
@@ -12,7 +12,18 @@ export default function App() {
/> />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Home /> <Home posts={posts} />
</div> </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; list-style-type: none;
li:not(:last-child) { li:not(:last-child) {
margin-right: 1rem; margin-right: 2.5rem;
} }
&-item { &-item {
styles/pages/homepage.scss
+22 -1
View File
@@ -1,3 +1,24 @@
.homepage { .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;
}
}
} }