e37b451ba5
This commit introduces a new `BlogArea` component that displays a list of blog posts. The changes include: - Added a new `BlogArea` component in `components/blogpost.tsx` that renders a list of blog posts with their title, description, and a link to the full post. - Integrated the `BlogArea` component into the `Home` page in `app/page.tsx`. - Added mock data for the blog posts in `app/page.tsx` to demonstrate the functionality.
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import BlogArea from "../components/blogpost";
|
|
|
|
// Mock data for blog posts
|
|
const blogposts = [
|
|
{
|
|
label: 'Retro Futurism: A Journey Through Time',
|
|
body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.',
|
|
publish: '2023-10-01',
|
|
get_absolute_url: '/blog/retro-futurism',
|
|
},
|
|
{
|
|
label: 'The Science Behind Video Games',
|
|
body: 'Discover how video games are pushing the boundaries of technology and human interaction.',
|
|
publish: '2023-09-25',
|
|
get_absolute_url: '/blog/science-video-games',
|
|
},
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="text-xl mx-24">
|
|
<header className="flex flex-col">
|
|
<div className="flex flex-row mt-12 mb-22">
|
|
<ul className="w-full flex flex-row justify-between list-none">
|
|
<li className="text-6xl p-2 pr-0">
|
|
<a href="https://aderk.tech/" className="text-white no-underline relative hover:text-white">
|
|
AderKI
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-3xl mb-20">
|
|
<p>
|
|
Hello. This is my personal store. Here I sell hoodies, comics, books, and other items. You can buy them.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<BlogArea blogposts={blogposts} />
|
|
</main>
|
|
|
|
<footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
|
|
<ul className="list-none m-4">
|
|
<li className="text-3xl"><h3>Socials</h3></li>
|
|
<li className="p-3 text-xl"><a href="https://www.instagram.com/aderkitty/">Instagram</a></li>
|
|
<li className="p-3 text-xl"><a href="https://mastodon.social/@aderkonstantin">Mastodon</a></li>
|
|
<li className="p-3 text-xl"><a href="https://github.com/AderKonstantin">GitHub</a></li>
|
|
<li className="p-3 text-xl"><a href="https://steamcommunity.com/yourprofile">Steam</a></li>
|
|
</ul>
|
|
<ul className="list-none m-4">
|
|
<li className="text-3xl"><h3>Games</h3></li>
|
|
<li className="p-3 text-xl"><a href="#">Joe The Rabbit</a></li>
|
|
</ul>
|
|
<ul className="list-none m-4">
|
|
<li className="text-3xl"><h3>Other Projects</h3></li>
|
|
<li className="p-3 text-xl"><a href="#">Ader Berry Bot (Telegram)</a></li>
|
|
<li className="p-3 text-xl"><a href="#">Store</a></li>
|
|
</ul>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|