ui: implement dynamic orange border highlight and shadow glow on hover for all cards
This commit is contained in:
Devesh S
@@ -25,7 +25,7 @@ const getAvatar = (author: string) => {
|
|||||||
|
|
||||||
const getRelativeTime = (dateString: string) => {
|
const getRelativeTime = (dateString: string) => {
|
||||||
if (!dateString) return 'just now';
|
if (!dateString) return 'just now';
|
||||||
|
|
||||||
// Normalize microsecond timestamps (e.g. 2026-07-22T13:28:18.174367) to standard millisecond precision
|
// Normalize microsecond timestamps (e.g. 2026-07-22T13:28:18.174367) to standard millisecond precision
|
||||||
let normalized = dateString;
|
let normalized = dateString;
|
||||||
const dotIndex = dateString.indexOf('.');
|
const dotIndex = dateString.indexOf('.');
|
||||||
@@ -193,7 +193,7 @@ export default function Community() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Optimistically update count (+1 if liked, -1 if unliked)
|
// Optimistically update count (+1 if liked, -1 if unliked)
|
||||||
setQuestions((prev) =>
|
setQuestions((prev) =>
|
||||||
prev.map((q) => {
|
prev.map((q) => {
|
||||||
if (q.id.toString() === id) {
|
if (q.id.toString() === id) {
|
||||||
const votesVal = typeof q.upvotes === 'number' ? q.upvotes : (typeof q.votes === 'number' ? q.votes : 0);
|
const votesVal = typeof q.upvotes === 'number' ? q.upvotes : (typeof q.votes === 'number' ? q.votes : 0);
|
||||||
@@ -231,11 +231,11 @@ export default function Community() {
|
|||||||
|
|
||||||
const handlePostQuestion = async () => {
|
const handlePostQuestion = async () => {
|
||||||
if (!questionText.trim()) return;
|
if (!questionText.trim()) return;
|
||||||
|
|
||||||
const displayAuthor = authorName.trim() || 'Anonymous';
|
const displayAuthor = authorName.trim() || 'Anonymous';
|
||||||
|
|
||||||
// Auto-detect hashtags based on question text content
|
// Auto-detect hashtags based on question text content
|
||||||
const detectedTags = TRENDING_TAGS.filter(tag =>
|
const detectedTags = TRENDING_TAGS.filter(tag =>
|
||||||
questionText.toLowerCase().includes(tag.toLowerCase())
|
questionText.toLowerCase().includes(tag.toLowerCase())
|
||||||
);
|
);
|
||||||
const finalTags = detectedTags.length > 0 ? detectedTags : ['fresher', 'general'];
|
const finalTags = detectedTags.length > 0 ? detectedTags : ['fresher', 'general'];
|
||||||
@@ -401,11 +401,10 @@ export default function Community() {
|
|||||||
<button
|
<button
|
||||||
key={chip.id}
|
key={chip.id}
|
||||||
onClick={() => setSortFilter(chip.id as any)}
|
onClick={() => setSortFilter(chip.id as any)}
|
||||||
className={`px-4 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap cursor-pointer transition-all border ${
|
className={`px-4 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap cursor-pointer transition-all border ${isActive
|
||||||
isActive
|
|
||||||
? 'bg-[#F97316] text-white border-[#F97316] shadow-sm'
|
? 'bg-[#F97316] text-white border-[#F97316] shadow-sm'
|
||||||
: 'bg-white hover:bg-slate-50 text-slate-600 border-[#E5E7EB]'
|
: 'bg-white hover:bg-slate-50 text-slate-600 border-[#E5E7EB]'
|
||||||
}`}
|
}`}
|
||||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||||
>
|
>
|
||||||
{chip.label}
|
{chip.label}
|
||||||
@@ -453,200 +452,194 @@ export default function Community() {
|
|||||||
const isTrending = (likesCount + ansCount) >= 5;
|
const isTrending = (likesCount + ansCount) >= 5;
|
||||||
const isBodyExpanded = expandedBodyIds.has(q.id.toString());
|
const isBodyExpanded = expandedBodyIds.has(q.id.toString());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StaggerItem key={q.id}>
|
<StaggerItem key={q.id}>
|
||||||
<motion.div
|
<motion.div
|
||||||
whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
|
whileHover={{ y: -2, boxShadow: '0 12px 30px -4px rgba(249,115,22,0.08)' }}
|
||||||
onClick={() => handleCardClick(q.id)}
|
onClick={() => handleCardClick(q.id)}
|
||||||
transition={{ duration: 0.2 }}
|
transition={{ duration: 0.2 }}
|
||||||
className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
|
className="bg-white border border-[#E5E7EB] border-l-4 border-l-transparent rounded-2xl p-4 transition-all duration-300 cursor-pointer hover:border-l-[#F97316]"
|
||||||
style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
|
style={{ boxShadow: '0 2px 12px -3px rgba(0,0,0,0.05)' }}
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
{/* Avatar */}
|
{/* Avatar */}
|
||||||
<img
|
<img
|
||||||
src={getAvatar(q.author)}
|
src={getAvatar(q.author)}
|
||||||
alt={q.author}
|
alt={q.author}
|
||||||
className="w-8 h-8 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0"
|
className="w-8 h-8 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
{/* Header / Meta */}
|
{/* Header / Meta */}
|
||||||
<div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
|
<div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
|
||||||
<span className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{q.author}</span>
|
<span className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{q.author}</span>
|
||||||
<span className="text-[10px] text-slate-300">•</span>
|
<span className="text-[10px] text-slate-300">•</span>
|
||||||
<span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(q.createdAt)}</span>
|
<span className="text-[10px] text-slate-400 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(q.createdAt)}</span>
|
||||||
|
|
||||||
{/* Badges on Top Right */}
|
|
||||||
<div className="ml-auto flex items-center gap-1 shrink-0">
|
|
||||||
{isTrending && (
|
|
||||||
<span className="bg-amber-50 text-amber-700 border border-amber-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">★ Trending</span>
|
|
||||||
)}
|
|
||||||
{q.isAnswered || ansCount > 0 ? (
|
|
||||||
<span className="bg-emerald-50 text-emerald-750 border border-emerald-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">✓ Answered</span>
|
|
||||||
) : (
|
|
||||||
<span className="bg-slate-50 text-slate-400 border border-slate-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">Unanswered</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 className={`font-bold text-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${
|
{/* Badges on Top Right */}
|
||||||
isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
|
<div className="ml-auto flex items-center gap-1 shrink-0">
|
||||||
}`}
|
{isTrending && (
|
||||||
style={{ fontFamily: 'Playfair Display, serif' }}>
|
<span className="bg-amber-50 text-amber-700 border border-amber-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">★ Trending</span>
|
||||||
{q.title}
|
)}
|
||||||
</h3>
|
{q.isAnswered || ansCount > 0 ? (
|
||||||
|
<span className="bg-emerald-50 text-emerald-750 border border-emerald-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">✓ Answered</span>
|
||||||
<p className={`text-[12.5px] text-slate-500 mb-3.5 leading-relaxed transition-all duration-300 ${
|
) : (
|
||||||
isBodyExpanded ? '' : 'line-clamp-1'
|
<span className="bg-slate-50 text-slate-400 border border-slate-200/40 text-[9px] px-1.5 py-0.5 rounded font-semibold tracking-wide uppercase">Unanswered</span>
|
||||||
}`} style={{ fontFamily: 'Inter, sans-serif' }}>
|
)}
|
||||||
{q.body}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-3 pt-2.5 border-t border-slate-100/60">
|
<h3 className={`font-bold text-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
|
||||||
{/* Left side: Replies & Likes & Tags inline */}
|
}`}
|
||||||
<div className="flex items-center gap-4 flex-wrap text-[11px]">
|
style={{ fontFamily: 'Playfair Display, serif' }}>
|
||||||
{/* Replies button */}
|
{q.title}
|
||||||
<button
|
</h3>
|
||||||
onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
|
|
||||||
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
|
<p className={`text-[12.5px] text-slate-500 mb-3.5 leading-relaxed transition-all duration-300 ${isBodyExpanded ? '' : 'line-clamp-1'
|
||||||
expandedQuestionIds.has(q.id.toString())
|
}`} style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||||
? 'text-[#F97316]'
|
{q.body}
|
||||||
: 'text-slate-500 hover:text-slate-800'
|
</p>
|
||||||
}`}
|
|
||||||
>
|
<div className="flex items-center justify-between flex-wrap gap-3 pt-2.5 border-t border-slate-100/60">
|
||||||
<MessageCircle className="w-3.5 h-3.5" />
|
{/* Left side: Replies & Likes & Tags inline */}
|
||||||
<span style={{ fontFamily: 'Poppins, sans-serif' }}>
|
<div className="flex items-center gap-4 flex-wrap text-[11px]">
|
||||||
{ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
|
{/* Replies button */}
|
||||||
</span>
|
<button
|
||||||
</button>
|
onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
|
||||||
|
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${expandedQuestionIds.has(q.id.toString())
|
||||||
{/* Upvotes button */}
|
? 'text-[#F97316]'
|
||||||
<button
|
: 'text-slate-500 hover:text-slate-800'
|
||||||
onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
|
}`}
|
||||||
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
|
>
|
||||||
isLiked
|
<MessageCircle className="w-3.5 h-3.5" />
|
||||||
? 'text-rose-600'
|
<span style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||||
: 'text-slate-500 hover:text-slate-850'
|
{ansCount > 0 ? `${ansCount} ${ansCount === 1 ? 'reply' : 'replies'}` : 'No replies yet'}
|
||||||
}`}
|
</span>
|
||||||
>
|
</button>
|
||||||
<ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
|
|
||||||
<span style={{ fontFamily: 'Poppins, sans-serif' }}>{likesCount}</span>
|
{/* Upvotes button */}
|
||||||
</button>
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
|
||||||
{/* Tags Inline */}
|
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${isLiked
|
||||||
<div className="flex items-center gap-1 flex-wrap pl-1 border-l border-slate-100">
|
? 'text-rose-600'
|
||||||
{(q.tags || []).map((tag) => (
|
: 'text-slate-500 hover:text-slate-850'
|
||||||
<span
|
}`}
|
||||||
key={tag}
|
>
|
||||||
onClick={(e) => { e.stopPropagation(); setSearchQuery(tag); }}
|
<ThumbsUp className="w-3.5 h-3.5" fill={isLiked ? 'currentColor' : 'none'} />
|
||||||
className="px-1.5 py-0.5 rounded bg-slate-50 text-[10px] font-semibold text-slate-400 border border-slate-100 hover:bg-slate-100 hover:text-slate-600 transition-colors"
|
<span style={{ fontFamily: 'Poppins, sans-serif' }}>{likesCount}</span>
|
||||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
</button>
|
||||||
>
|
|
||||||
#{tag}
|
{/* Tags Inline */}
|
||||||
</span>
|
<div className="flex items-center gap-1 flex-wrap pl-1 border-l border-slate-100">
|
||||||
))}
|
{(q.tags || []).map((tag) => (
|
||||||
</div>
|
<span
|
||||||
</div>
|
key={tag}
|
||||||
</div>
|
onClick={(e) => { e.stopPropagation(); setSearchQuery(tag); }}
|
||||||
|
className="px-1.5 py-0.5 rounded bg-slate-50 text-[10px] font-semibold text-slate-400 border border-slate-100 hover:bg-slate-100 hover:text-slate-600 transition-colors"
|
||||||
{/* Expandable Answers Section */}
|
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||||
{expandedQuestionIds.has(q.id.toString()) && (
|
>
|
||||||
<div className="mt-4 pt-4 border-t border-slate-150 flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
|
#{tag}
|
||||||
<div className="flex items-center justify-between">
|
</span>
|
||||||
<h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
))}
|
||||||
Replies ({ansCount})
|
</div>
|
||||||
</h4>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{Array.isArray(q.answers) && q.answers.length > 0 ? (
|
|
||||||
<div className="flex flex-col gap-3.5 max-h-80 overflow-y-auto pr-1">
|
{/* Expandable Answers Section */}
|
||||||
{q.answers.map((ans: any) => (
|
{expandedQuestionIds.has(q.id.toString()) && (
|
||||||
<div key={ans.id} className="relative pl-6 flex items-start gap-2.5 group">
|
<div className="mt-4 pt-4 border-t border-slate-150 flex flex-col gap-4" onClick={(e) => e.stopPropagation()}>
|
||||||
{/* Thread connector line */}
|
<div className="flex items-center justify-between">
|
||||||
<div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
|
<h4 className="text-[10px] font-bold text-slate-500 tracking-tight uppercase" style={{ fontFamily: 'Poppins, sans-serif' }}>
|
||||||
|
Replies ({ansCount})
|
||||||
{/* Senior Avatar */}
|
</h4>
|
||||||
<img
|
</div>
|
||||||
src={getAvatar(ans.author)}
|
{Array.isArray(q.answers) && q.answers.length > 0 ? (
|
||||||
alt={ans.author}
|
<div className="flex flex-col gap-3.5 max-h-80 overflow-y-auto pr-1">
|
||||||
className="w-6 h-6 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0 relative z-10"
|
{q.answers.map((ans: any) => (
|
||||||
/>
|
<div key={ans.id} className="relative pl-6 flex items-start gap-2.5 group">
|
||||||
|
{/* Thread connector line */}
|
||||||
<div className="flex-1 min-w-0">
|
<div className="absolute left-[9px] top-[-16px] bottom-3 w-3 border-l border-b border-slate-200 rounded-bl-lg pointer-events-none" />
|
||||||
<div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
|
|
||||||
<span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
|
{/* Senior Avatar */}
|
||||||
{/* Blue verified check icon for senior helpers */}
|
<img
|
||||||
<span className="inline-flex text-blue-500" title="Verified Senior Helper">
|
src={getAvatar(ans.author)}
|
||||||
<svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
|
alt={ans.author}
|
||||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
className="w-6 h-6 rounded-full object-cover bg-slate-50 border border-slate-100 shrink-0 relative z-10"
|
||||||
</svg>
|
/>
|
||||||
</span>
|
|
||||||
<span className="text-[9px] text-slate-350">•</span>
|
<div className="flex-1 min-w-0">
|
||||||
<span className="text-[10px] text-slate-450 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(ans.createdAt)}</span>
|
<div className="flex items-center gap-1.5 mb-0.5 flex-wrap">
|
||||||
</div>
|
<span className="text-[11.5px] font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{ans.author}</span>
|
||||||
<p className="text-[12.5px] text-slate-600 leading-relaxed font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
|
{/* Blue verified check icon for senior helpers */}
|
||||||
{ans.body}
|
<span className="inline-flex text-blue-500" title="Verified Senior Helper">
|
||||||
</p>
|
<svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
|
||||||
</div>
|
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
||||||
</div>
|
</svg>
|
||||||
))}
|
</span>
|
||||||
|
<span className="text-[9px] text-slate-350">•</span>
|
||||||
|
<span className="text-[10px] text-slate-450 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>{getRelativeTime(ans.createdAt)}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-[12.5px] text-slate-600 leading-relaxed font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||||
|
{ans.body}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-slate-400 italic font-medium py-1 pl-4" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||||
|
No answers posted yet. Senior helpers can reply to this question via the Telegram Bot!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<p className="text-xs text-slate-400 italic font-medium py-1 pl-4" style={{ fontFamily: 'Inter, sans-serif' }}>
|
|
||||||
No answers posted yet. Senior helpers can reply to this question via the Telegram Bot!
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</div>
|
</StaggerItem>
|
||||||
</motion.div>
|
);
|
||||||
</StaggerItem>
|
})}
|
||||||
);
|
</StaggerContainer>
|
||||||
})}
|
)}
|
||||||
</StaggerContainer>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Pagination — arrows only */}
|
{/* Pagination — arrows only */}
|
||||||
{!loading && totalPages > 1 && (
|
{!loading && totalPages > 1 && (
|
||||||
<div className="flex items-center justify-between mt-6 px-1">
|
<div className="flex items-center justify-between mt-6 px-1">
|
||||||
<motion.button
|
<motion.button
|
||||||
whileHover={{ scale: 1.04 }}
|
whileHover={{ scale: 1.04 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
onClick={() => handlePageChange(currentPage - 1)}
|
onClick={() => handlePageChange(currentPage - 1)}
|
||||||
disabled={currentPage === 0 || loading}
|
disabled={currentPage === 0 || loading}
|
||||||
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
|
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${currentPage === 0
|
||||||
currentPage === 0
|
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
|
||||||
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
|
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
|
||||||
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
|
}`}
|
||||||
}`}
|
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
>
|
||||||
>
|
<ChevronRight className="w-4 h-4 rotate-180" />
|
||||||
<ChevronRight className="w-4 h-4 rotate-180" />
|
Prev
|
||||||
Prev
|
</motion.button>
|
||||||
</motion.button>
|
|
||||||
|
|
||||||
<span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
|
<span className="text-[11px] text-slate-405 font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
|
||||||
Page {currentPage + 1} of {totalPages} · {filteredQuestions.length} questions
|
Page {currentPage + 1} of {totalPages} · {filteredQuestions.length} questions
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<motion.button
|
<motion.button
|
||||||
whileHover={{ scale: 1.04 }}
|
whileHover={{ scale: 1.04 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
onClick={() => handlePageChange(currentPage + 1)}
|
onClick={() => handlePageChange(currentPage + 1)}
|
||||||
disabled={currentPage >= totalPages - 1 || loading}
|
disabled={currentPage >= totalPages - 1 || loading}
|
||||||
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
|
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${currentPage >= totalPages - 1
|
||||||
currentPage >= totalPages - 1
|
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
|
||||||
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
|
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
|
||||||
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
|
}`}
|
||||||
}`}
|
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
>
|
||||||
>
|
Next
|
||||||
Next
|
<ChevronRight className="w-4 h-4" />
|
||||||
<ChevronRight className="w-4 h-4" />
|
</motion.button>
|
||||||
</motion.button>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -803,11 +796,10 @@ export default function Community() {
|
|||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<button
|
<button
|
||||||
onClick={() => toggleLike(conf.id)}
|
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 ${
|
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)
|
||||||
likedIds.has(conf.id)
|
|
||||||
? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
|
? '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'
|
: 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<Heart
|
<Heart
|
||||||
className="w-3.5 h-3.5"
|
className="w-3.5 h-3.5"
|
||||||
|
|||||||
Reference in New Issue
Block a user