Post Card

1'use client'
2 
3import { Button } from '@/components/ui/button'
4 
5// Import types from shared types file to avoid circular dependencies
6import type { Post } from './types'
7// Re-export for backward compatibility
8export type { Post } from './types'
9 
10import { demoPost } from './demo/blogging'
11 
12 
13/**
14 * ═══════════════════════════════════════════════════════════════════════════
15 * PostCardProps
16 * ═══════════════════════════════════════════════════════════════════════════
17 *
18 * Props for the PostCard component, a blog post card with multiple layout variants.
19 */
20export interface PostCardProps {
21  data?: {
22    /** The blog post to display. */
23    post?: Post
24  }
25  actions?: {
26    /** Called when the read more button is clicked. */
27    onReadMore?: (post: Post) => void
28  }
29  appearance?: {
30    /**
31     * Card layout variant.
32     * @default "default"
33     */
34    variant?: 'default' | 'compact' | 'horizontal' | 'covered'
35    /**
36     * Whether to show the cover image.
37     * @default true
38     */
39    showImage?: boolean
40    /**
41     * Whether to show author information.
42     * @default true
43     */
44    showAuthor?: boolean
45    /**
46     * Whether to show the category label.
47     * @default true
48     */
49    showCategory?: boolean
50  }
51}
52 
53/**
54 * A blog post card component with multiple layout variants.
55 * Supports default, compact, horizontal, and covered (overlay) styles.
56 *
57 * Features:
58 * - Four layout variants (default, compact, horizontal, covered)
59 * - Cover image with hover zoom effect
60 * - Author avatar and info display
61 * - Category and tags display
62 * - Read more action button
63 * - Responsive design
64 *
65 * @component
66 * @example
67 * ```tsx
68 * <PostCard
69 *   data={{
70 *     post: {
71 *       title: "Getting Started Guide",
72 *       excerpt: "Learn the basics of our component library.",
73 *       coverImage: "https://example.com/image.jpg",
74 *       author: { name: "Sarah Chen", avatar: "https://example.com/avatar.jpg" },
75 *       publishedAt: "2024-01-15",
76 *       readTime: "5 min read",
77 *       tags: ["Tutorial", "Components"],
78 *       category: "Tutorial"
79 *     }
80 *   }}
81 *   actions={{
82 *     onReadMore: (post) => console.log("Read more:", post.title)
83 *   }}
84// … truncated