-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1bbb53e
commit a2c7b5f
Showing
8 changed files
with
132 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
// app/blog/[id]/generateStaticParams.ts | ||
import { posts } from '../data/posts'; | ||
|
||
export async function generateStaticParams() { | ||
return posts.map((post) => ({ | ||
id: post.id, | ||
})); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
// app/blog/[id]/page.tsx | ||
import { posts } from '../data/posts'; | ||
import { BlogPost } from '../types/blog'; | ||
import { notFound } from 'next/navigation'; | ||
|
||
interface BlogPostPageProps { | ||
params: { | ||
id: string; | ||
}; | ||
} | ||
|
||
const BlogPostPage = ({ params }: BlogPostPageProps) => { | ||
const post: BlogPost | undefined = posts.find((p) => p.id === params.id); | ||
|
||
if (!post) { | ||
notFound(); | ||
} | ||
const formattedDate = new Date(post.date).toLocaleDateString('en-US', { | ||
year: 'numeric', | ||
month: 'long', | ||
}); | ||
|
||
return ( | ||
<div className="prose border-blue-600 border mx-auto p-8"> | ||
<h1>{post?.title}</h1> | ||
<p><em>{post?.author} - {formattedDate}</em></p> | ||
<div className=''> | ||
<img className='h-6 ' | ||
src={post?.imageUrl}/> | ||
</div> | ||
<div>{post?.content}</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default BlogPostPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
// data/posts.ts | ||
import { BlogPost } from '../types/blog'; | ||
|
||
export const posts: BlogPost[] = [ | ||
{ | ||
id: '1', | ||
title: 'First Post, In every new lession in ship late', | ||
content: 'This is the content of the first post.', | ||
imageUrl: 'https://images.unsplash.com/photo-1724226224544-b244b08e505e?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
description: 'none 1', | ||
date: '2024-08-25', | ||
author: 'John Doe', | ||
}, | ||
{ | ||
id: '2', | ||
title: 'Second Post, hellow the the world the country is down', | ||
content: 'This is the content of the second post.', | ||
imageUrl: 'https://plus.unsplash.com/premium_photo-1692833836807-7c2ec90aec19?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
description: 'none 2', | ||
date: '2024-09-26', | ||
author: 'Jane Smith', | ||
}, | ||
// Add more posts here... | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,47 @@ | ||
import Demo from "../components/demo"; | ||
// `app/page.tsx` is the UI for the `/` URL | ||
|
||
export default function blog() { | ||
return( | ||
<section className="m-auto max-w-fit bg-eight flex flex-col justify-center items-center"> | ||
<Demo/> | ||
</section> | ||
) ; | ||
} | ||
import Link from 'next/link'; | ||
import { posts } from './data/posts'; | ||
import { IconCornerDownRight } from '@tabler/icons-react'; | ||
|
||
const BlogPage = () => { | ||
return ( | ||
<section className="prose min-h-screen md:flex mx-auto p-8"> | ||
<div className='basis-1/3 h-64 sm:h-auto three'> | ||
<h1 className=' text-6xl'>Blog News</h1> | ||
<p>Latest News and <br /> update</p> | ||
</div> | ||
<ul className='basis-2/3 flex flex-col gap-16 border-yellow-600 '> | ||
{posts.map((post) => ( | ||
<li className='flex border-lime-500 h-64 bg rounded flex-col sm:flex-row ' | ||
key={post.id}> | ||
<Link className='basis-1/3 m-1 h-20 md:h-full overflow-hidden md:aspect-video rounded border-blue-600 ' | ||
href={`/blog/${post.id}`}> | ||
<img className='w-full h-full object-cover' | ||
src={post.imageUrl}/> | ||
</Link> | ||
<div className='basis-1/2 flex flex-col justify-between mx-1 border-yellow-500'> | ||
<div> | ||
<i className='not-italic font-semibold text-five | ||
py-1 text-sm'>{ | ||
// Here is the updated line of code | ||
new Date(post.date).toLocaleDateString('en-US', { | ||
year: 'numeric', | ||
month: 'short', | ||
}) | ||
}</i> | ||
<h2 className='my-2 sm:my-6 font-semibold text-2xl lg:text-4xl text-five'> | ||
{post.title} | ||
</h2> | ||
<Link className='flex my-4 p-1 w-fit text-sm bg-five text-primary rounded-full px-3' href={`/blog/${post.id}`}> Discover <IconCornerDownRight | ||
width={20} height={20} /> </Link> | ||
</div> | ||
<i className='text-four'>{post.description}</i> | ||
|
||
</div> | ||
</li> | ||
))} | ||
</ul> | ||
</section> | ||
); | ||
}; | ||
|
||
export default BlogPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
// types/blog.ts | ||
export interface BlogPost { | ||
id: string; | ||
title: string; | ||
content: string; | ||
imageUrl: string; | ||
description: string, | ||
date: string; | ||
author: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters