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: improve BlogPostCard responsive design and image handling

Browse Source
This commit is contained in:
Mauricio Siu
2025-03-02 17:53:42 -06:00
parent c5ea54792b
commit 350b36d97a
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
"use client"; "use client";
import type { Post } from "@/lib/ghost"; import type { Post } from "@/lib/ghost";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
interface BlogPostCardProps { interface BlogPostCardProps {
@@ -28,25 +27,24 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
return ( return (
<Link <Link
href={`/blog/${post.slug}`} href={`/blog/${post.slug}`}
className="group block hover:bg-muted p-4 rounded-lg" className="group block hover:bg-muted p-4 rounded-lg border border-border"
> >
<article className="flex gap-6 items-start"> <article className="flex gap-6 items-start max-sm:flex-col items-center">
<div className="relative h-32 w-48 shrink-0"> <div className="relative shrink-0 flex items-center justify-center mx-auto">
<Image <img
src={post.feature_image || "/og.png"} src={post.feature_image || "/og.png"}
alt={post.feature_image ? post.title : "Default Image"} alt={post.feature_image ? post.title : "Default Image"}
fill className="object-cover rounded-lg object-center mx-auto self-center h-32 w-64 sm:w-32 sm:h-24"
className="object-cover rounded-lg"
/> />
</div> </div>
<div className="flex-1 min-w-0"> <div className="w-full flex-wrap flex">
<h2 className="text-xl font-semibold mb-2 group-hover:text-primary"> <h2 className="text-xl font-semibold mb-2 group-hover:text-primary">
{post.title} {post.title}
</h2> </h2>
<p className="text-muted-foreground line-clamp-2 mb-4"> <p className="text-muted-foreground line-clamp-2 mb-4">
{post.custom_excerpt || post.excerpt} {post.custom_excerpt || post.excerpt}
</p> </p>
<div className="flex items-center text-sm text-muted-foreground"> <div className="flex items-center text-sm text-muted-foreground flex-wrap">
<div className="flex items-center"> <div className="flex items-center">
{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">
@@ -56,18 +54,16 @@ export function BlogPostCard({ post, locale }: BlogPostCardProps) {
onClick={handleTwitterClick} onClick={handleTwitterClick}
type="button" type="button"
> >
<Image <img
src={post.primary_author.profile_image} src={post.primary_author.profile_image}
alt={post.primary_author.name} alt={post.primary_author.name}
fill
className="object-cover" className="object-cover"
/> />
</button> </button>
) : ( ) : (
<Image <img
src={post.primary_author.profile_image} src={post.primary_author.profile_image}
alt={post.primary_author.name} alt={post.primary_author.name}
fill
className="object-cover" className="object-cover"
/> />
)} )}