fix typo
This commit is contained in:
@@ -114,23 +114,23 @@ const MembersDirectory = () => {
|
||||
const Border = ({ yaxis = false }) => {
|
||||
return (
|
||||
yaxis ?
|
||||
<div className=' border-2 w-full border-var(--purple-lavender) my-24' />
|
||||
: <div className=' border-2 w-full border-var(--purple-lavender) mb-24' />
|
||||
<div className=' border-2 w-full border-[var(--purple-lavender)] my-24' />
|
||||
: <div className=' border-2 w-full border-[var(--purple-lavender)] mb-24' />
|
||||
)
|
||||
}
|
||||
const MemberCard = ({ member }) => (
|
||||
<Card className="p-6 bg-background rounded-3xl border border-var(--neutral-800) hover:shadow-lg transition-all h-full">
|
||||
<Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
|
||||
{/* Profile Photo */}
|
||||
<div className="flex justify-center mb-4">
|
||||
{member.profile_photo_url ? (
|
||||
<img
|
||||
src={member.profile_photo_url}
|
||||
alt={`${member.first_name} ${member.last_name}`}
|
||||
className="w-32 h-32 rounded-full object-cover border-4 border-var(--neutral-800)"
|
||||
className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-32 h-32 rounded-full bg-var(--neutral-800) border-4 border-var(--neutral-800) flex items-center justify-center">
|
||||
<span className="text-4xl font-semibold text-var(--purple-lavender)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
|
||||
<span className="text-4xl font-semibold text-[var(--purple-lavender)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{getInitials(member.first_name, member.last_name)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -138,15 +138,15 @@ const MembersDirectory = () => {
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<h3 className="text-2xl font-semibold text-var(--purple-ink) text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{member.first_name} {member.last_name}
|
||||
</h3>
|
||||
|
||||
{/* Partner Name */}
|
||||
{member.directory_partner_name && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Heart className="h-4 w-4 text-var(--orange-light)" />
|
||||
<span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Heart className="h-4 w-4 text-[var(--orange-light)]" />
|
||||
<span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Partner: {member.directory_partner_name}
|
||||
</span>
|
||||
</div>
|
||||
@@ -154,7 +154,7 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Bio */}
|
||||
{member.directory_bio && (
|
||||
<p className="text-var(--purple-lavender) text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{member.directory_bio}
|
||||
</p>
|
||||
)}
|
||||
@@ -162,8 +162,8 @@ const MembersDirectory = () => {
|
||||
{/* Member Since */}
|
||||
{member.created_at && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Calendar className="h-4 w-4 text-var(--purple-lavender)" />
|
||||
<span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Calendar className="h-4 w-4 text-[var(--purple-lavender)]" />
|
||||
<span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Member since {new Date(member.created_at).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
@@ -176,10 +176,10 @@ const MembersDirectory = () => {
|
||||
<div className="space-y-3 mb-4">
|
||||
{member.directory_email && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Mail className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
|
||||
<Mail className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
|
||||
<a
|
||||
href={`mailto:${member.directory_email}`}
|
||||
className="text-var(--purple-lavender) hover:text-var(--purple-ink) truncate"
|
||||
className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] truncate"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{member.directory_email}
|
||||
@@ -189,10 +189,10 @@ const MembersDirectory = () => {
|
||||
|
||||
{member.directory_phone && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Phone className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
|
||||
<Phone className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
|
||||
<a
|
||||
href={`tel:${member.directory_phone}`}
|
||||
className="text-var(--purple-lavender) hover:text-var(--purple-ink)"
|
||||
className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)]"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{member.directory_phone}
|
||||
@@ -202,8 +202,8 @@ const MembersDirectory = () => {
|
||||
|
||||
{member.directory_address && (
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<MapPin className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
|
||||
<span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<MapPin className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
|
||||
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{member.directory_address}
|
||||
</span>
|
||||
</div>
|
||||
@@ -212,17 +212,17 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Social Media Links */}
|
||||
{(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
|
||||
<div className="pt-4 border-t border-var(--neutral-800)">
|
||||
<div className="pt-4 border-t border-[var(--neutral-800)]">
|
||||
<div className="flex justify-center gap-3">
|
||||
{member.social_media_facebook && (
|
||||
<a
|
||||
href={getSocialMediaLink(member.social_media_facebook)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Facebook"
|
||||
>
|
||||
<Facebook className="h-5 w-5 text-var(--blue-facebook)" />
|
||||
<Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -231,10 +231,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(member.social_media_instagram)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Instagram"
|
||||
>
|
||||
<Instagram className="h-5 w-5 text-var(--red-instagram)" />
|
||||
<Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -243,10 +243,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(member.social_media_twitter)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Twitter/X"
|
||||
>
|
||||
<Twitter className="h-5 w-5 text-var(--blue-twitter)" />
|
||||
<Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -255,10 +255,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(member.social_media_linkedin)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<Linkedin className="h-5 w-5 text-var(--blue-linkedin)" />
|
||||
<Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
@@ -266,10 +266,10 @@ const MembersDirectory = () => {
|
||||
)}
|
||||
|
||||
{/* View Profile Button */}
|
||||
<div className="pt-4 mt-4 border-t border-var(--neutral-800)">
|
||||
<div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
|
||||
<Button
|
||||
onClick={() => handleViewProfile(member.id)}
|
||||
className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full py-5"
|
||||
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full py-5"
|
||||
>
|
||||
<UserCircle className="h-4 w-4 mr-2" />
|
||||
View Full Profile
|
||||
@@ -279,7 +279,7 @@ const MembersDirectory = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800)">
|
||||
<div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
|
||||
<Navbar />
|
||||
|
||||
<div className="max-w-7xl mx-auto py-12">
|
||||
@@ -289,29 +289,29 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Header */}
|
||||
<div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
LOAF Members
|
||||
</h1>
|
||||
<p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-var(--purple-lavender) font-medium'>{totalMembers}</span>
|
||||
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[var(--purple-lavender)] font-medium'>{totalMembers}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="mb-24 mx-10">
|
||||
<div className="relative w-full ">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by name or bio..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
|
||||
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
/>
|
||||
</div>
|
||||
{searchQuery && (
|
||||
<p className="mt-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="mt-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
|
||||
</p>
|
||||
)}
|
||||
@@ -325,7 +325,7 @@ const MembersDirectory = () => {
|
||||
{/* Members Grid */}
|
||||
{loading ? (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
|
||||
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
|
||||
</div>
|
||||
) : filteredMembers.length > 0 ? (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@@ -335,11 +335,11 @@ const MembersDirectory = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20">
|
||||
<User className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
|
||||
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<User className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
|
||||
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{searchQuery ? 'No Members Found' : 'No Members in Directory'}
|
||||
</h3>
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{searchQuery
|
||||
? 'Try adjusting your search query.'
|
||||
: 'Members who opt in to the directory will appear here.'}
|
||||
@@ -354,18 +354,18 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Info Card */}
|
||||
{!loading && members.length > 0 && (
|
||||
<Card className="mt-12 p-6 bg-var(--lavender-500) border-var(--neutral-800)">
|
||||
<Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
|
||||
<User className="h-6 w-6 text-var(--purple-lavender)" />
|
||||
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
|
||||
<User className="h-6 w-6 text-[var(--purple-lavender)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Want to appear in the directory?
|
||||
</h3>
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
|
||||
<a href="/members/profile" className="text-var(--orange-light) hover:underline font-medium">
|
||||
<a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
|
||||
Edit your profile →
|
||||
</a>
|
||||
</p>
|
||||
@@ -381,13 +381,13 @@ const MembersDirectory = () => {
|
||||
{selectedMember && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{selectedMember.first_name} {selectedMember.last_name}
|
||||
</DialogTitle>
|
||||
{selectedMember.directory_partner_name && (
|
||||
<DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Heart className="h-5 w-5 text-var(--orange-light)" />
|
||||
<span className="text-var(--purple-lavender)">Partner: {selectedMember.directory_partner_name}</span>
|
||||
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
<span className="text-[var(--purple-lavender)]">Partner: {selectedMember.directory_partner_name}</span>
|
||||
</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
@@ -396,10 +396,10 @@ const MembersDirectory = () => {
|
||||
{/* Bio */}
|
||||
{selectedMember.directory_bio && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
About
|
||||
</h3>
|
||||
<p className="text-var(--purple-lavender) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-[var(--purple-lavender)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{selectedMember.directory_bio}
|
||||
</p>
|
||||
</div>
|
||||
@@ -407,20 +407,20 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Contact Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Contact Information
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{selectedMember.directory_email && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-var(--lavender-500)">
|
||||
<Mail className="h-5 w-5 text-var(--purple-lavender)" />
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Mail className="h-5 w-5 text-[var(--purple-lavender)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<a
|
||||
href={`mailto:${selectedMember.directory_email}`}
|
||||
className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
|
||||
className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_email}
|
||||
@@ -431,14 +431,14 @@ const MembersDirectory = () => {
|
||||
|
||||
{selectedMember.directory_phone && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-var(--lavender-500)">
|
||||
<Phone className="h-5 w-5 text-var(--purple-lavender)" />
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Phone className="h-5 w-5 text-[var(--purple-lavender)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
|
||||
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
|
||||
<a
|
||||
href={`tel:${selectedMember.directory_phone}`}
|
||||
className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
|
||||
className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{selectedMember.directory_phone}
|
||||
@@ -449,12 +449,12 @@ const MembersDirectory = () => {
|
||||
|
||||
{selectedMember.directory_address && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="p-2 rounded-lg bg-var(--lavender-500)">
|
||||
<MapPin className="h-5 w-5 text-var(--purple-lavender)" />
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<MapPin className="h-5 w-5 text-[var(--purple-lavender)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
|
||||
<p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{selectedMember.directory_address}
|
||||
</p>
|
||||
</div>
|
||||
@@ -463,12 +463,12 @@ const MembersDirectory = () => {
|
||||
|
||||
{selectedMember.directory_dob && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-var(--lavender-500)">
|
||||
<Heart className="h-5 w-5 text-var(--orange-light)" />
|
||||
<div className="p-2 rounded-lg bg-[var(--lavender-500)]">
|
||||
<Heart className="h-5 w-5 text-[var(--orange-light)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
|
||||
<p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(selectedMember.directory_dob)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -480,14 +480,14 @@ const MembersDirectory = () => {
|
||||
{/* Volunteer Interests */}
|
||||
{selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Volunteer Interests
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedMember.volunteer_interests.map((interest, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
|
||||
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
|
||||
>
|
||||
{interest}
|
||||
</Badge>
|
||||
@@ -500,7 +500,7 @@ const MembersDirectory = () => {
|
||||
{(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
|
||||
selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Connect on Social Media
|
||||
</h3>
|
||||
<div className="flex gap-3">
|
||||
@@ -509,10 +509,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(selectedMember.social_media_facebook)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Facebook"
|
||||
>
|
||||
<Facebook className="h-6 w-6 text-var(--blue-facebook)" />
|
||||
<Facebook className="h-6 w-6 text-[var(--blue-facebook)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -521,10 +521,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(selectedMember.social_media_instagram)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Instagram"
|
||||
>
|
||||
<Instagram className="h-6 w-6 text-var(--red-instagram)" />
|
||||
<Instagram className="h-6 w-6 text-[var(--red-instagram)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -533,10 +533,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(selectedMember.social_media_twitter)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Twitter/X"
|
||||
>
|
||||
<Twitter className="h-6 w-6 text-var(--blue-twitter)" />
|
||||
<Twitter className="h-6 w-6 text-[var(--blue-twitter)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -545,10 +545,10 @@ const MembersDirectory = () => {
|
||||
href={getSocialMediaLink(selectedMember.social_media_linkedin)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
|
||||
className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<Linkedin className="h-6 w-6 text-var(--blue-linkedin)" />
|
||||
<Linkedin className="h-6 w-6 text-[var(--blue-linkedin)]" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
@@ -565,21 +565,21 @@ const MembersDirectory = () => {
|
||||
{/* Pagination */}
|
||||
{!loading && filteredMembers.length > 0 && (
|
||||
<div className="mt-10 flex flex-col items-center gap-4 pb-12">
|
||||
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
<Button
|
||||
onClick={() => setCurrentPage(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
|
||||
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
|
||||
>
|
||||
First Page
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
|
||||
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
|
||||
onClick={() => setCurrentPage(pageNumber)}
|
||||
className={
|
||||
isActive
|
||||
? "bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
|
||||
: "bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
|
||||
? "bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
|
||||
: "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
|
||||
}
|
||||
>
|
||||
{pageNumber}
|
||||
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
|
||||
<Button
|
||||
onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
|
||||
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setCurrentPage(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
|
||||
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
|
||||
>
|
||||
Last Page
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user