import { ArrowRight } from "lucide-react"; import { Card } from "@/components/ui/card"; interface Post { id: string; title: string; summary: string; label: string; author: string; published: string; url: string; image: string; tags?: string[]; } interface Blog8Props { heading?: string; description?: string; posts?: Post[]; } const Blog8 = ({ heading = "Blog Posts", description = "Discover the latest insights and tutorials about modern web development, UI design, and component-driven architecture.", posts = [ { id: "post-1", title: "Building Modern UIs: A Deep Dive into Shadcn and React Components", summary: "Join us for an in-depth exploration of building modern user interfaces using shadcn/ui and React. Learn best practices and advanced techniques.", label: "Web Design", author: "Sarah Chen", published: "15 Feb 2024", url: "https://shadcnblocks.com", image: "/images/block/placeholder-dark-1.svg", tags: ["Web Design", "UI Development"], }, { id: "post-2", title: "Mastering Tailwind CSS: From Basics to Advanced Techniques", summary: "Discover how to leverage the full power of Tailwind CSS to create beautiful, responsive websites with clean and maintainable code.", label: "Web Design", author: "Michael Park", published: "22 Feb 2024", url: "https://shadcnblocks.com", image: "/images/block/placeholder-dark-1.svg", tags: ["Web Design", "CSS"], }, ], }: Blog8Props) => { return (

{heading}

{description}

{posts.map((post) => (

{post.tags?.map((tag) => {tag})}

{post.title}

{post.summary}

{post.author} • {post.published}

))}

); }; export { Blog8 };