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

🎨 feat(blogpost): Implement animated link component

Browse Source 
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.
This commit is contained in:
AderKonstantin
2025-03-01 08:20:55 +03:00
parent ec759247e9
commit 91ff17e8b7
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/blogpost.tsx
View File

@@ -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>