import { ArrowRight } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardFooter, CardHeader, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; interface Post { id: string; title: string; summary: string; label: string; author: string; published: string; url: string; image: string; } interface Blog7Props { tagline: string; heading: string; description: string; buttonText: string; buttonUrl: string; posts: Post[]; className?: string; } const Blog7 = ({ tagline = "Latest Updates", heading = "Blog", description = "Discover the latest trends, tips, and best practices in modern web development. From UI components to design systems, stay updated with our expert insights.", posts = [ { id: "post-1", title: "Getting Started with shadcn/ui Components", summary: "Learn how to quickly integrate and customize shadcn/ui components in your Next.js projects. We'll cover installation, theming, and best practices for building modern interfaces.", label: "Tutorial", author: "Sarah Chen", published: "1 Jan 2024", url: "https://www.shadcnblocks.com", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg", }, { id: "post-2", title: "Building Accessible Web Applications", summary: "Explore how to create inclusive web experiences using shadcn/ui's accessible components. Discover practical tips for implementing ARIA labels, keyboard navigation, and semantic HTML.", label: "Accessibility", author: "Marcus Rodriguez", published: "1 Jan 2024", url: "#", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg", }, { id: "post-3", title: "Modern Design Systems with Tailwind CSS", summary: "Dive into creating scalable design systems using Tailwind CSS and shadcn/ui. Learn how to maintain consistency while building flexible and maintainable component libraries.", label: "Design Systems", author: "Emma Thompson", published: "1 Jan 2024", url: "#", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg", }, ], className, }: Blog7Props) => { return (

{tagline}

{heading}

{description}

{posts.map((post) => (

{post.title}

{post.author} · {post.published}

{post.summary}

Installation

Files

components

Styles

Installation

Files

components

Styles