From 91ff17e8b74e5df1320099daa9d7a5c8bb81fc97 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Sat, 1 Mar 2025 08:20:55 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(blogpost):=20Implement=20an?=
 =?UTF-8?q?imated=20link=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a new `AnimatedLink` component that provides a smooth hover animation
effect to links. This component is then used in the `BlogArea` component to
enhance the appearance of the blog post links.

The changes include:

- Creating a new `AnimatedLink` component in `animatedLink.tsx`
- Updating the `BlogArea` component in `blogpost.tsx` to use the new
  `AnimatedLink` component instead of the default `Link` component from
  Next.js.
---
 components/animatedLink.tsx | 22 ++++++++++++++++++++++
 components/blogpost.tsx     | 10 +++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 components/animatedLink.tsx

diff --git a/components/animatedLink.tsx b/components/animatedLink.tsx
new file mode 100644
index 0000000..8e03faa
--- /dev/null
+++ b/components/animatedLink.tsx
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface AnimatedLinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AnimatedLink = ({ href, children, className = '' }: AnimatedLinkProps) => {
+  return (
+    <Link
+      href={href}
+      className={`group relative text-white hover:text-white ${className}`}
+    >
+      {children}
+      <span className="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100"></span>
+    </Link>
+  );
+};
+
+export default AnimatedLink;
\ No newline at end of file
diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index c79ca49..a113d45 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import AnimatedLink from '../components/animatedLink';
 import Image from 'next/image';
 
 interface BlogPost {
@@ -34,9 +34,9 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                         <div className="right flex flex-col">
                             <div className="blogpost-label text-2xl mb-4">
                                 <h2>
-                                    <Link href={blogpost.get_absolute_url}>
+                                    <AnimatedLink href={blogpost.get_absolute_url}>
                                         {blogpost.label}
-                                    </Link>
+                                    </AnimatedLink>
                                 </h2>
                             </div>
                             <ul className="blogpost-tags flex flex-row space-x-4 mb-4">
@@ -51,9 +51,9 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
                                     <p>Posted: {blogpost.publish}</p>
                                 </div>
                                 <div className="text-2xl">
-                                    <Link href={blogpost.get_absolute_url}>
+                                    <AnimatedLink href={blogpost.get_absolute_url}>
                                         Read the article
-                                    </Link>
+                                    </AnimatedLink>
                                 </div>
                             </div>
                         </div>