Post List

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import { ChevronLeft, ChevronRight } from 'lucide-react'
6import { useState } from 'react'
7import type { Post } from './types'
8import { PostCard } from './post-card'
9import { demoPosts } from './demo/blogging'
10 
11/**
12 * ═══════════════════════════════════════════════════════════════════════════
13 * PostListProps
14 * ═══════════════════════════════════════════════════════════════════════════
15 *
16 * Props for the PostList component, a blog post list with multiple layout variants.
17 */
18export interface PostListProps {
19  data?: {
20    /** Array of blog posts to display. */
21    posts?: Post[]
22  }
23  actions?: {
24    /** Called when the read more button is clicked on a post. */
25    onReadMore?: (post: Post) => void
26  }
27  appearance?: {
28    /**
29     * Layout variant for the post list.
30     * @default "list"
31     */
32    variant?: 'list' | 'grid' | 'carousel' | 'fullwidth'
33    /**
34     * Number of columns for grid and fullwidth variants.
35     * @default 2
36     */
37    columns?: 2 | 3 | 4
38    /**
39     * Whether to show author information on post cards.
40     * @default true
41     */
42    showAuthor?: boolean
43    /**
44     * Whether to show category labels on post cards.
45     * @default true
46     */
47    showCategory?: boolean
48  }
49}
50 
51/**
52 * A blog post list component with multiple layout variants.
53 * Supports list, grid, carousel, and fullwidth paginated modes.
54 *
55 * Features:
56 * - Four layout variants (list, grid, carousel, fullwidth)
57 * - Responsive grid columns
58 * - Carousel with touch-friendly navigation
59 * - Fullwidth mode with pagination
60 * - Configurable author and category display
61 *
62 * @component
63 * @example
64 * ```tsx
65 * <PostList
66 *   data={{
67 *     posts: [
68 *       {
69 *         title: "Getting Started Guide",
70 *         excerpt: "Learn the basics...",
71 *         coverImage: "https://example.com/image.jpg",
72 *         author: { name: "Sarah Chen" },
73 *         publishedAt: "2024-01-15"
74 *       }
75 *     ]
76 *   }}
77 *   appearance={{
78 *     variant: "grid",
79 *     columns: 3,
80 *     showAuthor: true
81 *   }}
82 *   actions={{
83 *     onReadMore: (post) => console.log("Read:", post.title)
84// … truncated