Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website synced 2025-06-26 18:16:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: replace anchor tags with buttons for author interactions

Browse Source
This commit is contained in:
Mauricio Siu
2025-02-28 02:16:27 -06:00
parent b797f6b9b3
commit 1319c79d61
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/website/app/[locale]/blog/components/BlogPostCard.tsx
View File

@@ -3,13 +3,14 @@
import type { Post } from "@/lib/ghost"; import type { Post } from "@/lib/ghost";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation";
interface BlogPostCardProps { interface BlogPostCardProps {
post: Post; post: Post;
locale: string; locale: string;
} }
export function BlogPostCard({ post, locale }: BlogPostCardProps) { export function BlogPostCard({ post, locale }: BlogPostCardProps) {
const router = useRouter();
const formattedDate = new Date(post.published_at).toLocaleDateString(locale, { const formattedDate = new Date(post.published_at).toLocaleDateString(locale, {
year: "numeric", year: "numeric",
month: "long", month: "long",
@@ -17,6 +18,9 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
}); });
const handleTwitterClick = (e: React.MouseEvent) => { const handleTwitterClick = (e: React.MouseEvent) => {
if (post.primary_author?.twitter) {
router.push(`https://twitter.com/${post.primary_author.twitter}`);
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}; };
@@ -29,7 +33,7 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
<article className="flex gap-6 items-start"> <article className="flex gap-6 items-start">
<div className="relative h-32 w-48 shrink-0"> <div className="relative h-32 w-48 shrink-0">
<Image <Image
src={post.feature_image || "/default.jpg"} src={post.feature_image || "/og.png"}
alt={post.feature_image ? post.title : "Default Image"} alt={post.feature_image ? post.title : "Default Image"}
fill fill
className="object-cover rounded-lg" className="object-cover rounded-lg"
@@ -47,12 +51,10 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
{post.primary_author?.profile_image && ( {post.primary_author?.profile_image && (
<div className="relative h-6 w-6 rounded-full overflow-hidden mr-2"> <div className="relative h-6 w-6 rounded-full overflow-hidden mr-2">
{post.primary_author.twitter ? ( {post.primary_author.twitter ? (
<a <button
href={`https://twitter.com/${post.primary_author.twitter}`}
target="_blank"
rel="noopener noreferrer"
className="block cursor-pointer transition-opacity hover:opacity-90" className="block cursor-pointer transition-opacity hover:opacity-90"
onClick={handleTwitterClick} onClick={handleTwitterClick}
type="button"
> >
<Image <Image
src={post.primary_author.profile_image} src={post.primary_author.profile_image}
@@ -60,7 +62,7 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
fill fill
className="object-cover" className="object-cover"
/> />
</a> </button>
) : ( ) : (
<Image <Image
src={post.primary_author.profile_image} src={post.primary_author.profile_image}
@@ -72,15 +74,13 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
</div> </div>
)} )}
{post.primary_author?.twitter ? ( {post.primary_author?.twitter ? (
<a <button
href={`https://twitter.com/${post.primary_author.twitter}`}
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary transition-colors" className="hover:text-primary transition-colors"
onClick={handleTwitterClick} onClick={handleTwitterClick}
type="button"
> >
{post.primary_author.name || "Unknown Author"} {post.primary_author.name || "Unknown Author"}
</a> </button>
) : ( ) : (
<span>{post.primary_author?.name || "Unknown Author"}</span> <span>{post.primary_author?.name || "Unknown Author"}</span>
)} )}