alirez.br
ff2632f8db
- Added image quality settings and device sizes in next.config.ts for better image optimization. - Updated package dependencies, including cheerio and baseline-browser-mapping. - Improved global styles for blog content images to ensure responsiveness. - Refactored button components for consistent sizing and styling across the application. - Enhanced blog post card layout with new variants and improved author name formatting. - Adjusted hero section and content layout for better visual appeal and user experience.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import type { BlockquoteBlockPayload } from "@/lib/blog-blocks";
|
|
import { Quote } from "lucide-react";
|
|
|
|
interface BlogBlockquoteProps {
|
|
payload: BlockquoteBlockPayload;
|
|
}
|
|
|
|
export function BlogBlockquote({ payload }: BlogBlockquoteProps) {
|
|
const { content, citation } = payload;
|
|
if (!content.trim()) return null;
|
|
|
|
return (
|
|
<figure className="my-8 not-prose">
|
|
<blockquote className="relative rounded-xl border border-border bg-muted/40 px-6 py-2 pr-14 text-foreground shadow-sm">
|
|
<Quote
|
|
className="absolute right-4 top-4 size-8 text-muted-foreground/40"
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
className="blog-blockquote-content text-lg leading-relaxed text-justify [&_p]:my-2 [&_a]:text-primary [&_a]:underline hover:[&_a]:no-underline"
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
{citation ? (
|
|
<footer className="mt-4 border-t border-border/60 pt-4">
|
|
<cite className="text-sm text-muted-foreground not-italic">
|
|
{citation}
|
|
</cite>
|
|
</footer>
|
|
) : null}
|
|
</blockquote>
|
|
</figure>
|
|
);
|
|
}
|