Merge from dev to loaf-prod for DEMO #25
@@ -7,7 +7,7 @@ import { Button } from '../components/ui/button';
|
|||||||
import { Badge } from '../components/ui/badge';
|
import { Badge } from '../components/ui/badge';
|
||||||
import Navbar from '../components/Navbar';
|
import Navbar from '../components/Navbar';
|
||||||
import MemberFooter from '../components/MemberFooter';
|
import MemberFooter from '../components/MemberFooter';
|
||||||
import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale } from 'lucide-react';
|
import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
@@ -17,6 +17,7 @@ const Dashboard = () => {
|
|||||||
const [resendLoading, setResendLoading] = useState(false);
|
const [resendLoading, setResendLoading] = useState(false);
|
||||||
const [eventActivity, setEventActivity] = useState(null);
|
const [eventActivity, setEventActivity] = useState(null);
|
||||||
const [activityLoading, setActivityLoading] = useState(true);
|
const [activityLoading, setActivityLoading] = useState(true);
|
||||||
|
const [activeTransactionTab, setActiveTransactionTab] = useState('all');
|
||||||
const joinedDate = user?.member_since || user?.created_at;
|
const joinedDate = user?.member_since || user?.created_at;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -180,7 +181,7 @@ const Dashboard = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Grid Layout */}
|
{/* Grid Layout */}
|
||||||
<div className="grid lg:grid-cols-3 gap-8">
|
<div className="grid lg:grid-cols-2 gap-8">
|
||||||
{/* Quick Stats */}
|
{/* Quick Stats */}
|
||||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
@@ -219,19 +220,41 @@ const Dashboard = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
|
||||||
|
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Membership Info
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
|
||||||
|
{user?.subscription_start_date && user?.subscription_end_date && (
|
||||||
|
<>
|
||||||
|
<div className="pt-4 border-t border-[var(--neutral-800)]">
|
||||||
|
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
|
||||||
|
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
{new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
|
||||||
|
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
{Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Upcoming Events */}
|
{/* Upcoming Events */}
|
||||||
<Card className="lg:col-span-2 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
|
<Card className="lg:col-span-1 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
Upcoming Events
|
My Event Activity
|
||||||
</h3>
|
</h3>
|
||||||
<Link to="/events">
|
<Link to="/events">
|
||||||
<Button
|
<Button className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender px-6">
|
||||||
className="btn-lavender "
|
<Calendar className="h-4 w-4 mr-2" />
|
||||||
data-testid="view-all-events-button"
|
Browse Events
|
||||||
>
|
|
||||||
View All
|
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -313,155 +336,129 @@ const Dashboard = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Event Activity Section */}
|
{/* Transaction History Section */}
|
||||||
<div className="mt-12">
|
<Card className="mt-12 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
||||||
<div className="flex justify-between items-center mb-6">
|
{/* Header */}
|
||||||
<h2 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<div className="flex items-center gap-3 mb-6">
|
||||||
My Event Activity
|
<div className="p-2 bg-[var(--green-light)] rounded-lg">
|
||||||
|
<Receipt className="h-5 w-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Transaction History
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activityLoading ? (
|
{/* Stats Row */}
|
||||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||||
) : eventActivity ? (
|
<div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
|
||||||
<div className="space-y-8">
|
<div className="flex items-center gap-2 mb-2">
|
||||||
{/* Stats Cards */}
|
<CreditCard className="h-4 w-4 text-[var(--green-light)]" />
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
<span className="text-sm text-[var(--green-light)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
Total Subscriptions
|
||||||
<div className="flex items-center gap-4">
|
</span>
|
||||||
<div className="bg-[var(--neutral-800)]/20 p-4 rounded-lg">
|
|
||||||
<Calendar className="h-8 w-8 text-brand-purple " />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
|
|
||||||
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{eventActivity.total_rsvps}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="bg-[var(--green-light)]/20 p-4 rounded-lg">
|
|
||||||
<CheckCircle className="h-8 w-8 text-[var(--green-light)]" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
|
|
||||||
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
{eventActivity.total_attended}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
{/* Upcoming RSVP'd Events */}
|
$30.00
|
||||||
{eventActivity.upcoming_events && eventActivity.upcoming_events.length > 0 && (
|
</p>
|
||||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
1 payment(s)
|
||||||
Upcoming Events (RSVP'd)
|
</p>
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{eventActivity.upcoming_events.map((event) => (
|
|
||||||
<Link to={`/events/${event.id}`} key={event.id}>
|
|
||||||
<div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-brand-purple hover:shadow-md transition-all">
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
|
|
||||||
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{new Date(event.start_at).toLocaleDateString()} at{' '}
|
|
||||||
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
|
|
||||||
</div>
|
|
||||||
<Badge className={
|
|
||||||
event.rsvp_status === 'yes' ? 'bg-[var(--green-light)] text-white' :
|
|
||||||
event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
|
|
||||||
'bg-gray-200 text-gray-700'
|
|
||||||
}>
|
|
||||||
{event.rsvp_status === 'yes' ? 'Going' :
|
|
||||||
event.rsvp_status === 'maybe' ? 'Maybe' : 'Not Going'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Past Events & Attendance */}
|
|
||||||
{eventActivity.past_events && eventActivity.past_events.length > 0 && (
|
|
||||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
Past Events
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{eventActivity.past_events.slice(0, 5).map((event) => (
|
|
||||||
<div key={event.id} className="p-4 border border-[var(--neutral-800)] rounded-xl">
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
|
|
||||||
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
{new Date(event.start_at).toLocaleDateString()} at{' '}
|
|
||||||
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-end gap-2">
|
|
||||||
<Badge className={event.attended ? 'bg-[var(--green-light)] text-white' : 'bg-gray-200 text-gray-700'}>
|
|
||||||
{event.attended ? 'Attended' : 'Did not attend'}
|
|
||||||
</Badge>
|
|
||||||
{event.attended && event.attended_at && (
|
|
||||||
<p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Checked in: {new Date(event.attended_at).toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{eventActivity.past_events.length > 5 && (
|
|
||||||
<p className="text-sm text-center text-brand-purple mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Showing 5 of {eventActivity.past_events.length} past events
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* No Events Message */}
|
|
||||||
{(!eventActivity.upcoming_events || eventActivity.upcoming_events.length === 0) &&
|
|
||||||
(!eventActivity.past_events || eventActivity.past_events.length === 0) && (
|
|
||||||
<Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
||||||
<div className="text-center">
|
|
||||||
<Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
|
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
||||||
No Event Activity Yet
|
|
||||||
</h3>
|
|
||||||
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
||||||
Browse upcoming events and RSVP to start building your event history!
|
|
||||||
</p>
|
|
||||||
<Link to="/events">
|
|
||||||
<Button className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender px-6">
|
|
||||||
<Calendar className="h-4 w-4 mr-2" />
|
|
||||||
Browse Events
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
|
||||||
<Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
<div className="flex items-center gap-2 mb-2">
|
||||||
<div className="text-center">
|
<Heart className="h-4 w-4 text-[var(--coral)]" />
|
||||||
<AlertCircle className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
|
<span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
Total Donations
|
||||||
Failed to load event activity. Please try refreshing the page.
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
$0.00
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
0 donation(s)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<div className="flex gap-2 mb-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTransactionTab('all')}
|
||||||
|
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||||
|
activeTransactionTab === 'all'
|
||||||
|
? 'bg-[var(--purple-lavender)] text-white'
|
||||||
|
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
|
||||||
|
}`}
|
||||||
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||||
|
>
|
||||||
|
All (1)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTransactionTab('subscriptions')}
|
||||||
|
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||||
|
activeTransactionTab === 'subscriptions'
|
||||||
|
? 'bg-[var(--purple-lavender)] text-white'
|
||||||
|
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
|
||||||
|
}`}
|
||||||
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||||
|
>
|
||||||
|
Subscriptions (1)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTransactionTab('donations')}
|
||||||
|
className={`px-6 py-2 rounded-full font-medium transition-all ${
|
||||||
|
activeTransactionTab === 'donations'
|
||||||
|
? 'bg-[var(--purple-lavender)] text-white'
|
||||||
|
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
|
||||||
|
}`}
|
||||||
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||||
|
>
|
||||||
|
Donations (0)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Transaction List */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{(activeTransactionTab === 'all' || activeTransactionTab === 'subscriptions') && (
|
||||||
|
<div className="flex items-center justify-between p-4 border border-[var(--neutral-800)] rounded-xl">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-[var(--purple-lavender)] rounded-lg"></div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<span className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
Annual Membership
|
||||||
|
</span>
|
||||||
|
<Badge className="bg-[var(--green-light)] text-white text-xs px-2 py-0.5 rounded">
|
||||||
|
active
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
<Calendar className="h-3.5 w-3.5" />
|
||||||
|
<span>Dec 16, 2025</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>Custom</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
Manual Payment
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
|
$30.00
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activeTransactionTab === 'donations' && (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Heart className="h-12 w-12 text-[var(--neutral-800)] mx-auto mb-3" />
|
||||||
|
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||||
|
No donations yet
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<MemberFooter />
|
<MemberFooter />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -160,13 +160,9 @@ export default function Financials() {
|
|||||||
<Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
|
<Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-6">
|
||||||
{/* Year Badge */}
|
{/* Year Badge */}
|
||||||
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
|
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl self-start">
|
||||||
<DollarSign className="h-8 w-8 mx-auto mb-2" />
|
<DollarSign className="h-8 w-8 text-white" />
|
||||||
<div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
|
</div>
|
||||||
{report.year}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm opacity-90">Fiscal Year</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Report Details */}
|
{/* Report Details */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
|
|||||||
@@ -167,9 +167,9 @@ export default function NewsletterArchive() {
|
|||||||
{groupedNewsletters[year].map(newsletter => (
|
{groupedNewsletters[year].map(newsletter => (
|
||||||
<Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
|
<Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg flex-shrink-0">
|
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl">
|
||||||
<FileText className="h-6 w-6 text-brand-purple " />
|
<FileText className="h-8 w-8 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||||
{newsletter.title}
|
{newsletter.title}
|
||||||
|
|||||||
Reference in New Issue
Block a user