personal website
nekomimi.pet
1interface BlogCardProps {
2 title: string
3 excerpt: string
4 date: string
5 readTime: string
6}
7
8export function BlogCard({ title, excerpt, date, readTime }: BlogCardProps) {
9 return (
10 <article className="group glass glass-hover p-6 sm:p-8 rounded-lg transition-all duration-500 cursor-pointer">
11 <div className="space-y-4">
12 <div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
13 <span>{date}</span>
14 <span>{readTime}</span>
15 </div>
16
17 <h3 className="text-lg sm:text-xl font-medium group-hover:text-muted-foreground transition-colors duration-300">
18 {title}
19 </h3>
20
21 <p className="text-muted-foreground leading-relaxed">{excerpt}</p>
22
23 <div className="flex items-center gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
24 <span>Read more</span>
25 <svg
26 className="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300"
27 fill="none"
28 stroke="currentColor"
29 viewBox="0 0 24 24"
30 >
31 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
32 </svg>
33 </div>
34 </div>
35 </article>
36 )
37}