"use client"; import React from "react"; import { motion, Variants } from "framer-motion"; import { CalendarDays, ArrowRight, Tag } from "lucide-react"; // --- TYPES & INTERFACES --- export type ArticleAccentColor = "orange" | "blue" | "purple" | "emerald"; export interface EssentialArticleCardProps { imageUrl: string; imageAlt?: string; // for accessibility category: string; categoryUrl?: string; // Link for the category tag title: string; excerpt: string; authorName: string; authorAvatarUrl: string; authorUrl?: string; // Link to author profile publishDate: string; // Pre-formatted string (e.g., "15 Oct 2024") articleUrl?: string; // Main link for the card themeColor?: ArticleAccentColor; className?: string; } /** * Essential Article Card (v1.0 Anzuelo/Free) * A minimalist, production-ready blog card designed for performance and clean typography. * Features ultra-smooth bimodal interactions (hover/tap) using physics-based animations. */ export const EssentialArticleCard = ({ imageUrl, imageAlt, category, categoryUrl = "#", title, excerpt, authorName, authorAvatarUrl, authorUrl = "#", publishDate, articleUrl = "#", themeColor = "orange", className, }: EssentialArticleCardProps) => { // Safe Color Mapping for bimodal themes const accentColors: Record = { orange: { text: "text-orange-600 dark:text-orange-400", bg: "bg-orange-50 dark:bg-orange-950/30", border: "border-orange-100 dark:border-orange-800/30", }, blue: { text: "text-blue-600 dark:text-blue-400", bg: "bg-blue-50 dark:bg-blue-950/30", border: "border-blue-100 dark:border-blue-800/30", }, purple: { text: "text-purple-600 dark:text-purple-400", bg: "bg-purple-50 dark:bg-purple-950/30", border: "border-purple-100 dark:border-purple-800/30", }, emerald: { text: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-950/30", border: "border-emerald-100 dark:border-emerald-800/30", }, }; const currentAccent = accentColors[themeColor]; // ANIMATION VARIANTS (Fixed Typing) const cardVariants: Variants = { initial: { scale: 1, y: 0, boxShadow: "0px 10px 20px -5px rgba(0,0,0,0.05)" }, hover: { scale: 1.01, y: -8, boxShadow: "0px 30px 60px -15px rgba(0,0,0,0.15)", transition: { type: "spring", stiffness: 200, damping: 20, mass: 0.8 } }, tap: { scale: 0.98, transition: { duration: 0.1 } } }; const imageVariants: Variants = { initial: { scale: 1 }, hover: { scale: 1.06, transition: { duration: 0.6, ease: [0.33, 1, 0.68, 1] } } }; const textHoverVariants: Variants = { initial: { x: 0 }, hover: { x: 4, transition: { duration: 0.3 } } }; // Main wrapper: handles linking and hover interaction const CardWrapper = ({ children }: { children: React.ReactNode }) => ( Read article: {title} {children} ); return ( {/* 1. IMAGE CONTAINER */}

{/* Subtle overlay */}

{/* 2. CONTENT BODY */}

{/* Category Tag */}

{category}

{/* Title */}

{title}

{/* Excerpt */}

{excerpt}

{/* 3. FOOTER (Author & Date) */}

{/* Author Link */}

{authorName} Author

{/* Date & CTA */}

{publishDate}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function EssentialArticleCardDemo() { const articleData = { imageUrl: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=800&auto=format&fit=crop", category: "Interfaces", title: "Mastering Framer Motion: Ultra-Smooth React Interactions.", excerpt: "Explore the core physics and mathematical principles behind Framer Motion to create high-performance web interactions.", authorName: "Alex Uixtra", authorAvatarUrl: "https://randomuser.me/api/portraits/men/32.jpg", publishDate: "Oct 22, 2024", }; return (

{/* 1. Essential Article Card (Orange Accent) */}

); }