-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPostTile.jsx
More file actions
108 lines (99 loc) · 3.92 KB
/
PostTile.jsx
File metadata and controls
108 lines (99 loc) · 3.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRightIcon } from '@phosphor-icons/react';
import { motion } from 'framer-motion';
import GenerativeArt from './GenerativeArt';
const PostTile = ({ post }) => {
const dateStr = new Date(post.updated || post.date).toLocaleDateString(
'en-GB',
{
year: 'numeric',
month: 'short',
day: '2-digit',
},
);
const categoryColor =
post.category === 'dev'
? 'var(--color-dev-badge)'
: post.category === 'series'
? 'var(--color-series-badge)'
: post.category === 'd&d' || post.category === 'dnd'
? 'var(--color-dnd-badge)'
: post.category === 'gist'
? 'var(--color-gist-badge)'
: post.category === 'feat'
? 'var(--color-feat-badge)'
: post.category === 'ai'
? 'var(--color-ai-badge)'
: 'var(--color-rant-badge)';
const categoryBg =
post.category === 'dev'
? 'rgba(59, 130, 246, 0.3)'
: post.category === 'series'
? 'rgba(237, 197, 49, 0.3)'
: post.category === 'd&d' || post.category === 'dnd'
? 'rgba(236, 72, 153, 0.3)'
: post.category === 'gist'
? 'rgba(245, 158, 11, 0.3)'
: post.category === 'feat'
? 'rgba(168, 85, 247, 0.3)'
: post.category === 'ai'
? 'rgba(132, 204, 22, 0.2)'
: 'rgba(16, 185, 129, 0.2)';
return (
<motion.div
whileHover={{ y: -5 }}
className="group relative flex flex-col overflow-hidden rounded-sm bg-zinc-900 border border-white/10 h-full"
>
<Link
to={post.isSeries ? `/blog/series/${post.slug}` : `/blog/${post.slug}`}
className="flex flex-col h-full"
>
{/* Visual Header */}
<div className="relative h-32 w-full overflow-hidden border-b border-white/5">
<GenerativeArt
seed={post.title}
className="w-full h-full opacity-40 transition-transform duration-700 ease-out group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent" />
<div className="absolute bottom-3 left-4 flex items-center gap-2">
<span
className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300"
style={{
borderColor: categoryColor,
backgroundColor: categoryBg,
}}
>
{post.category || 'Post'}
</span>
{post.isSeries && (
<span className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-sm">
Series
</span>
)}
</div>
</div>
{/* Content */}
<div className="flex flex-col flex-grow p-5">
<span className="font-mono text-[10px] text-gray-500 uppercase tracking-widest mb-2">
{dateStr}
</span>
<h3 className="text-lg font-medium font-sans uppercase text-white mb-3 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight">
{post.title}
</h3>
<div className="mt-auto pt-4 flex items-center justify-between border-t border-white/5">
<span className="text-[10px] font-mono font-bold uppercase tracking-widest text-gray-500 group-hover:text-white transition-colors">
Read Intel
</span>
<ArrowRightIcon
weight="bold"
size={14}
className="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
/>
</div>
</div>
</Link>
</motion.div>
);
};
export default PostTile;