ui: remove mock confessions in frontend and add empty state placeholder card
This commit is contained in:
@@ -861,29 +861,7 @@ export const QUESTIONS_DATA: Question[] = [
|
||||
];
|
||||
|
||||
// ─── Confessions ─────────────────────────────────────────────────────────────
|
||||
export const CONFESSIONS_DATA: Confession[] = [
|
||||
{
|
||||
id: '1',
|
||||
content: 'I was so nervous on my first day that I went to the wrong department. A senior helped me out and became my best friend. RIT has such a warm community! 🧡',
|
||||
createdAt: '2025-07-19T11:00:00Z',
|
||||
reactions: 87,
|
||||
category: 'Wholesome',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
content: 'The library WiFi is actually faster than my home connection. No complaints from me 😂',
|
||||
createdAt: '2025-07-18T15:30:00Z',
|
||||
reactions: 134,
|
||||
category: 'Funny',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
content: 'I have a crush on someone in my class but I\'m too shy to talk. We have been in the same group project for 2 months now 😅',
|
||||
createdAt: '2025-07-17T09:00:00Z',
|
||||
reactions: 212,
|
||||
category: 'Crush',
|
||||
},
|
||||
];
|
||||
export const CONFESSIONS_DATA: Confession[] = [];
|
||||
|
||||
// ─── Toolkit Items ───────────────────────────────────────────────────────────
|
||||
export const TOOLKIT_ITEMS: ToolkitItem[] = [
|
||||
|
||||
@@ -765,52 +765,64 @@ export default function Community() {
|
||||
</div>
|
||||
|
||||
{/* Confessions Feed */}
|
||||
<StaggerContainer className="flex flex-col gap-4">
|
||||
{CONFESSIONS_DATA.map((conf) => (
|
||||
<StaggerItem key={conf.id}>
|
||||
<motion.div
|
||||
whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="bg-white rounded-2xl border border-[#E5E7EB] p-6 transition-all duration-300"
|
||||
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
|
||||
<Shield className="w-4 h-4 text-slate-500" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
|
||||
<p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{conf.category && (
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-55 text-slate-650 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{conf.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[13px] text-slate-750 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => toggleLike(conf.id)}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
|
||||
? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
|
||||
: 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className="w-3.5 h-3.5"
|
||||
fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
|
||||
color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
|
||||
/>
|
||||
<span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
{CONFESSIONS_DATA.length > 0 ? (
|
||||
<StaggerContainer className="flex flex-col gap-4">
|
||||
{CONFESSIONS_DATA.map((conf) => (
|
||||
<StaggerItem key={conf.id}>
|
||||
<motion.div
|
||||
whileHover={{ y: -4, boxShadow: '0 20px 50px -12px rgba(0,0,0,0.12)', borderColor: '#CBD5E1' }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="bg-white rounded-2xl border border-[#E5E7EB] p-6 transition-all duration-300"
|
||||
style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center bg-slate-50 border border-slate-100">
|
||||
<Shield className="w-4 h-4 text-slate-500" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-bold text-slate-800" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous</span>
|
||||
<p className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(conf.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{conf.category && (
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-slate-50 text-slate-600 border border-slate-200/40" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
{conf.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[13px] text-slate-755 leading-relaxed mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>{conf.content}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => toggleLike(conf.id)}
|
||||
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
|
||||
? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
|
||||
: 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className="w-3.5 h-3.5"
|
||||
fill={likedIds.has(conf.id) ? '#e11d48' : 'none'}
|
||||
color={likedIds.has(conf.id) ? '#e11d48' : 'currentColor'}
|
||||
/>
|
||||
<span>{conf.reactions + (likedIds.has(conf.id) ? 1 : 0)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
) : (
|
||||
<div className="bg-white rounded-2xl border border-[#E5E7EB] p-8 text-center" style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}>
|
||||
<Shield className="w-8 h-8 text-slate-300 mx-auto mb-3" />
|
||||
<p className="text-sm font-semibold text-slate-700 mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||
No Confessions Yet
|
||||
</p>
|
||||
<p className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||
Be the first to post a confession anonymously!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
|
||||
Reference in New Issue
Block a user