From 102fac4f11317ae31ceae01c7cc94d44984ab461 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 13:39:53 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20blog=20post=20UI?=
 =?UTF-8?q?=20and=20add=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces several improvements to the blog post UI:

- Adds new icons for tags and calendar using SVG images
- Refines the layout and styling of the blog post tags and publish date
- Adjusts the overall spacing and padding of the blog area and individual blog posts
- Increases the font size of the "Read the article" link for better readability

These changes aim to enhance the visual appeal and user experience of the blog section, making it more visually engaging and informative for the readers.
---
 components/blogpost.tsx | 24 +++++++++++++++---------
 public/calendar.svg     | 16 ++++++++++++++++
 public/tags.svg         |  5 +++++
 3 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 public/calendar.svg
 create mode 100644 public/tags.svg

diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index 1bc9722..13939db 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -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';
 
@@ -16,10 +19,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 border-t border-white 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 +42,21 @@ 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>
+                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Games</li>
+                                <li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">Science</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>
diff --git a/public/calendar.svg b/public/calendar.svg
new file mode 100644
index 0000000..c002b85
--- /dev/null
+++ b/public/calendar.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+  <line x1="16" y1="2" x2="16" y2="6" />
+  <line x1="8" y1="2" x2="8" y2="6" />
+  <line x1="3" y1="10" x2="21" y2="10" />
+</svg>
diff --git a/public/tags.svg b/public/tags.svg
new file mode 100644
index 0000000..49c8817
--- /dev/null
+++ b/public/tags.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="var(--ci-primary-color, currentColor)" d="M511.974,271.891a47.744,47.744,0,0,0-14.706-33.008L311.57,57.98a29.9,29.9,0,0,0-21.2-8.731H257.228l217.754,212.6.092.088a15.907,15.907,0,0,1,.741,22.337l-156.4,173.355,21.953,21.356L499.447,305.85A47.748,47.748,0,0,0,511.974,271.891Z" class="ci-primary"/>
+  <path fill="var(--ci-primary-color, currentColor)" d="M426.9,283.161a23.924,23.924,0,0,0-5.231-24.742c-.106-.111-.2-.231-.306-.34L224.307,57.716l-.094-.094a31.791,31.791,0,0,0-22.628-9.373H60.194A44.244,44.244,0,0,0,16,92.443v141.1a32.121,32.121,0,0,0,10.045,23.28l210.32,200.2.077.073a23.817,23.817,0,0,0,16.409,6.508q.447,0,.9-.017a24.111,24.111,0,0,0,6.741-1.217,23.854,23.854,0,0,0,10.047-6.517L421.983,291.232A24.033,24.033,0,0,0,426.9,283.161ZM252.5,428.2,48.077,233.612,48,233.54V92.443A12.208,12.208,0,0,1,60.194,80.249h141.39l191.7,194.918Z" class="ci-primary"/>
+  <path fill="var(--ci-primary-color, currentColor)" d="M140,112a52,52,0,1,0,52,52A52.059,52.059,0,0,0,140,112Zm0,72a20,20,0,1,1,20-20A20.023,20.023,0,0,1,140,184Z" class="ci-primary"/>
+</svg>