Skip to content

Commit 420d5a7

Browse files
officialrajdeepsinghofficialrajdeepsingh
committed
Adding the typescript
1 parent b60cb28 commit 420d5a7

File tree

1 file changed

+47
-46
lines changed

1 file changed

+47
-46
lines changed

‎src/pages/[slug].tsx

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,73 @@
11
import React from 'react';
22
import data from 'data/posts';
33
import dayjs from 'dayjs';
4-
function Read(props: postComponent) {
54

65

7-
let { post } = props
6+
function Read({ post }: postComponent) {
7+
8+
9+
810

911

1012
return (
1113
<div className='container'>
1214

1315
<hgroup className='readPost'>
14-
<h1>{post[0].title}</h1>
15-
<p className='paragraf-description'>{post[0].description}</p>
16+
<h1>{post.title}</h1>
17+
<p className='paragraf-description'>{post.description}</p>
1618
</hgroup>
1719
<nav>
1820
<ul>
19-
<li className='link-list'>{post[0].author}</li>
21+
<li className='link-list'>{post.author}</li>
2022
<li className='link-list'>
21-
{dayjs(post[0].date).format('DD MMMM, YYYY')}
23+
{dayjs(post.date).format('DD MMMM, YYYY')}
2224
</li>
2325
</ul>
2426
</nav>
25-
<div id='typography' className='article-card'>
26-
<p>
27-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo orci, interdum at tellus quis, imperdiet rhoncus odio. In urna diam, rhoncus non hendrerit non, convallis sit amet elit. Integer semper odio a iaculis congue. Donec sed libero non elit finibus ullamcorper. Nam elementum a diam vitae tincidunt.
28-
</p>
29-
<p>
30-
Integer a erat ut urna commodo ultrices congue eget sem. Sed ac diam sed metus volutpat venenatis nec vitae justo. Suspendisse gravida, nunc id interdum ullamcorper, eros elit laoreet erat, in ullamcorper augue eros vitae turpis. Nam porttitor ante sed condimentum posuere.
31-
</p>
32-
<p>
33-
Fusce vehicula, massa ut iaculis posuere, dolor dolor dignissim elit, at euismod massa metus sed augue. Vivamus rutrum risus velit, id tempor augue mattis nec. Fusce enim lacus, eleifend at facilisis eget, gravida non neque. Sed sed lacus a turpis sodales cursus.
34-
</p>
35-
<p>
36-
Nullam et augue scelerisque, tempus nunc et, ultricies felis. Morbi congue orci et pretium luctus. Mauris lectus purus, venenatis et nisi a, elementum tincidunt dolor.
37-
</p>
38-
<blockquote>
39-
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
40-
Nam at dui sit amet ipsum cursus ornare."
41-
<footer>
42-
<cite>- Phasellus eget lacinia</cite>
43-
</footer>
44-
</blockquote>
45-
<p>
46-
Nulla facilisi. Quisque nec eros ultrices, mollis est non, viverra felis. Cras neque urna, malesuada nec tortor quis, finibus dignissim massa. Aenean ullamcorper sit amet mi in hendrerit.
47-
</p>
48-
<p>
49-
Integer a erat ut urna commodo ultrices congue eget sem. Sed ac diam sed metus volutpat venenatis nec vitae justo. Suspendisse gravida, nunc id interdum ullamcorper, eros elit laoreet erat, in ullamcorper augue eros vitae turpis. Nam porttitor ante sed condimentum posuere.
50-
</p>
51-
<p>
52-
Fusce vehicula, massa ut iaculis posuere, dolor dolor dignissim elit, at euismod massa metus sed augue. Vivamus rutrum risus velit, id tempor augue mattis nec. Fusce enim lacus, eleifend at facilisis eget, gravida non neque. Sed sed lacus a turpis sodales cursus.
53-
</p>
27+
<div id='typography' className='article-card'>
28+
<p>
29+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo orci, interdum at tellus quis, imperdiet rhoncus odio. In urna diam, rhoncus non hendrerit non, convallis sit amet elit. Integer semper odio a iaculis congue. Donec sed libero non elit finibus ullamcorper. Nam elementum a diam vitae tincidunt.
30+
</p>
31+
<p>
32+
Integer a erat ut urna commodo ultrices congue eget sem. Sed ac diam sed metus volutpat venenatis nec vitae justo. Suspendisse gravida, nunc id interdum ullamcorper, eros elit laoreet erat, in ullamcorper augue eros vitae turpis. Nam porttitor ante sed condimentum posuere.
33+
</p>
34+
<p>
35+
Fusce vehicula, massa ut iaculis posuere, dolor dolor dignissim elit, at euismod massa metus sed augue. Vivamus rutrum risus velit, id tempor augue mattis nec. Fusce enim lacus, eleifend at facilisis eget, gravida non neque. Sed sed lacus a turpis sodales cursus.
36+
</p>
37+
<p>
38+
Nullam et augue scelerisque, tempus nunc et, ultricies felis. Morbi congue orci et pretium luctus. Mauris lectus purus, venenatis et nisi a, elementum tincidunt dolor.
39+
</p>
40+
<blockquote>
41+
Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
42+
Nam at dui sit amet ipsum cursus ornare.
43+
<footer>
44+
<cite>- Phasellus eget lacinia</cite>
45+
</footer>
46+
</blockquote>
47+
<p>
48+
Nulla facilisi. Quisque nec eros ultrices, mollis est non, viverra felis. Cras neque urna, malesuada nec tortor quis, finibus dignissim massa. Aenean ullamcorper sit amet mi in hendrerit.
49+
</p>
50+
<p>
51+
Integer a erat ut urna commodo ultrices congue eget sem. Sed ac diam sed metus volutpat venenatis nec vitae justo. Suspendisse gravida, nunc id interdum ullamcorper, eros elit laoreet erat, in ullamcorper augue eros vitae turpis. Nam porttitor ante sed condimentum posuere.
52+
</p>
53+
<p>
54+
Fusce vehicula, massa ut iaculis posuere, dolor dolor dignissim elit, at euismod massa metus sed augue. Vivamus rutrum risus velit, id tempor augue mattis nec. Fusce enim lacus, eleifend at facilisis eget, gravida non neque. Sed sed lacus a turpis sodales cursus.
55+
</p>
5456
</div>
5557
</div>
5658
);
5759

5860
}
5961

6062
interface postComponent {
61-
tag: string;
62-
date: string;
63-
title: string;
64-
description: string;
65-
image: string;
66-
author: string;
63+
post: {
64+
tag: string;
65+
date: string;
66+
title: string;
67+
description: string;
68+
image: string;
69+
author: string;
70+
}
6771
}
6872

6973

@@ -73,23 +77,20 @@ export async function getStaticPaths() {
7377
params: { slug: item.title.toLowerCase().replaceAll(" ", "-") },
7478
}))
7579

76-
77-
78-
7980
return {
8081
paths: paths,
8182
fallback: false,
8283
}
8384
}
8485

85-
export async function getStaticProps(context) {
86+
export async function getStaticProps(context: { params: { slug: string; }; }) {
8687

8788
const { params: { slug } } = context
8889

8990
const post = data.filter((item) => item.title.toLowerCase().replaceAll(" ", "-") === slug)
9091

9192
return {
92-
props: { post },
93+
props: { post: post[0] },
9394
}
9495
}
9596

0 commit comments

Comments
 (0)