AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3 from AderKonstantin/dev

Browse Source 
Dev
This commit is contained in:
AderKonstantin
2025-03-26 14:03:25 +03:00
committed by GitHub
parent ab2d27288f 600a734ad4
commit 838e60ce3b
11 changed files with 176 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/blogpost.tsx
View File

@@ -1,5 +1,8 @@
'use client';
import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg'
import AnimatedLink from '../components/animatedLink';
import Image from 'next/image';
@@ -8,6 +11,7 @@ interface BlogPost {
body: string;
publish: string;
get_absolute_url: string;
tags: string[];
}
interface BlogAreaProps {
@@ -16,10 +20,10 @@ interface BlogAreaProps {
export default function BlogArea({ blogposts }: BlogAreaProps) {
return (
<div className="blog-area py-16 border-t border-white w-full">
<div className="blog-area pt-16 pb-8 w-full">
<div className="blogposts">
{blogposts.map((blogpost, index) => (
<div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
<div key={index} className="blogpost flex flex-row overflow-hidden mb-14">
<div className="left mr-5">
<div className="blogpost-image">
<Image
@@ -39,18 +43,22 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
</AnimatedLink>
</h2>
</div>
<ul className="blogpost-tags flex flex-row space-x-4 mb-4">
<li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
<li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
<ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
<li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
{blogpost.tags.map((tag, index) => (
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li>
))}
</ul>
<div className="blogpost-description text-base mb-4">
{blogpost.body.slice(0, 512)}...
</div>
<div className="blogpost-other flex flex-row justify-between items-end mt-auto">
<div className="text-base">
<p>Posted: {blogpost.publish}</p>
</div>
<div className="text-2xl">
<ul className="text-base inline-flex justify-end items-center">
<li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li>
<li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
</ul>
<div className="text-xl">
<AnimatedLink href={blogpost.get_absolute_url}>
Read the article
</AnimatedLink>

41
components/header/main.tsx Normal file
View File

@@ -0,0 +1,41 @@
import searchPic from '@/public/search.svg';
import Image from "next/image";
import Link from "next/link";
import AnimatedLink from '../animatedLink';
import HeaderToolbar from "../header/toolbar";
export default function MainHeader() {
return (
<header className="flex flex-col">
<div className="flex flex-row mt-12 mb-22">
<ul className="w-full flex flex-row justify-between items-baseline list-none">
<li className="text-4xl">
<AnimatedLink href="https://blog.aderk.tech/en">
aderk.tech
</AnimatedLink>
</li>
<li className="text-6xl flex items-center justify-center filter brightness-0 invert">
<Link href="#">
<Image
src={searchPic}
alt="search"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
<div className="text-2xl mb-20">
<p className="leading-10">
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
</p>
</div>
<HeaderToolbar />
</header>
);
}