629 lines
25 KiB
JavaScript
629 lines
25 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import api from '../../utils/api';
|
||
import Navbar from '../../components/Navbar';
|
||
import MemberFooter from '../../components/MemberFooter';
|
||
import { Card } from '../../components/ui/card';
|
||
import { Input } from '../../components/ui/input';
|
||
import { Badge } from '../../components/ui/badge';
|
||
import { Button } from '../../components/ui/button';
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '../../components/ui/dialog';
|
||
import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
|
||
import { useToast } from '../../hooks/use-toast';
|
||
|
||
const MembersDirectory = () => {
|
||
const [members, setMembers] = useState([]);
|
||
const [filteredMembers, setFilteredMembers] = useState([]);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [loading, setLoading] = useState(true);
|
||
const [selectedMember, setSelectedMember] = useState(null);
|
||
const [profileDialogOpen, setProfileDialogOpen] = useState(false);
|
||
const { toast } = useToast();
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const pageSize = 12;
|
||
|
||
useEffect(() => {
|
||
fetchMembers();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
filterMembers();
|
||
}, [searchQuery, members]);
|
||
|
||
useEffect(() => {
|
||
setCurrentPage(1);
|
||
}, [searchQuery, members]);
|
||
|
||
const fetchMembers = async () => {
|
||
try {
|
||
const response = await api.get('/members/directory');
|
||
setMembers(response.data);
|
||
setFilteredMembers(response.data);
|
||
} catch (error) {
|
||
console.error('Failed to fetch members:', error);
|
||
toast({
|
||
title: "Error",
|
||
description: "Failed to load members directory. Please try again.",
|
||
variant: "destructive"
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const filterMembers = () => {
|
||
if (!searchQuery.trim()) {
|
||
setFilteredMembers(members);
|
||
return;
|
||
}
|
||
|
||
const query = searchQuery.toLowerCase();
|
||
const filtered = members.filter(member => {
|
||
const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
|
||
const bio = (member.directory_bio || '').toLowerCase();
|
||
return fullName.includes(query) || bio.includes(query);
|
||
});
|
||
|
||
setFilteredMembers(filtered);
|
||
};
|
||
|
||
const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
|
||
|
||
const pageStart = (currentPage - 1) * pageSize;
|
||
|
||
const paginatedMembers = filteredMembers.slice(pageStart, pageStart + pageSize);
|
||
|
||
const totalMembers = members.length;
|
||
|
||
const getInitials = (firstName, lastName) => {
|
||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||
};
|
||
|
||
const getSocialMediaLink = (url) => {
|
||
if (!url) return null;
|
||
// Ensure URL has protocol
|
||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||
return `https://${url}`;
|
||
}
|
||
return url;
|
||
};
|
||
|
||
const handleViewProfile = async (memberId) => {
|
||
try {
|
||
const response = await api.get(`/members/directory/${memberId}`);
|
||
setSelectedMember(response.data);
|
||
setProfileDialogOpen(true);
|
||
} catch (error) {
|
||
toast({
|
||
title: "Error",
|
||
description: "Failed to load member profile. Please try again.",
|
||
variant: "destructive"
|
||
});
|
||
}
|
||
};
|
||
|
||
const formatDate = (dateString) => {
|
||
if (!dateString) return null;
|
||
return new Date(dateString).toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
|
||
};
|
||
const Border = ({ yaxis = false }) => {
|
||
return (
|
||
yaxis ?
|
||
<div className=' border-2 w-full border-[#664FA3] my-24' />
|
||
: <div className=' border-2 w-full border-[#664FA3] mb-24' />
|
||
)
|
||
}
|
||
const MemberCard = ({ member }) => (
|
||
<Card className="p-6 bg-white rounded-3xl border border-[#ddd8eb] 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-[#ddd8eb]"
|
||
/>
|
||
) : (
|
||
<div className="w-32 h-32 rounded-full bg-[#DDD8EB] border-4 border-[#ddd8eb] flex items-center justify-center">
|
||
<span className="text-4xl font-semibold text-[#664fa3]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||
{getInitials(member.first_name, member.last_name)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Name */}
|
||
<h3 className="text-2xl font-semibold text-[#422268] 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-[#ff9e77]" />
|
||
<span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
Partner: {member.directory_partner_name}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bio */}
|
||
{member.directory_bio && (
|
||
<p className="text-[#664fa3] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{member.directory_bio}
|
||
</p>
|
||
)}
|
||
|
||
{/* Member Since */}
|
||
{member.created_at && (
|
||
<div className="flex items-center justify-center gap-2 mb-4">
|
||
<Calendar className="h-4 w-4 text-[#664fa3]" />
|
||
<span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
Member since {new Date(member.created_at).toLocaleDateString('en-US', {
|
||
month: 'long',
|
||
year: 'numeric'
|
||
})}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Contact Information */}
|
||
<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-[#664fa3] flex-shrink-0" />
|
||
<a
|
||
href={`mailto:${member.directory_email}`}
|
||
className="text-[#664fa3] hover:text-[#422268] truncate"
|
||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||
>
|
||
{member.directory_email}
|
||
</a>
|
||
</div>
|
||
)}
|
||
|
||
{member.directory_phone && (
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<Phone className="h-4 w-4 text-[#664fa3] flex-shrink-0" />
|
||
<a
|
||
href={`tel:${member.directory_phone}`}
|
||
className="text-[#664fa3] hover:text-[#422268]"
|
||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||
>
|
||
{member.directory_phone}
|
||
</a>
|
||
</div>
|
||
)}
|
||
|
||
{member.directory_address && (
|
||
<div className="flex items-start gap-2 text-sm">
|
||
<MapPin className="h-4 w-4 text-[#664fa3] flex-shrink-0 mt-0.5" />
|
||
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{member.directory_address}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 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-[#ddd8eb]">
|
||
<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-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Facebook"
|
||
>
|
||
<Facebook className="h-5 w-5 text-[#1877F2]" />
|
||
</a>
|
||
)}
|
||
|
||
{member.social_media_instagram && (
|
||
<a
|
||
href={getSocialMediaLink(member.social_media_instagram)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Instagram"
|
||
>
|
||
<Instagram className="h-5 w-5 text-[#E4405F]" />
|
||
</a>
|
||
)}
|
||
|
||
{member.social_media_twitter && (
|
||
<a
|
||
href={getSocialMediaLink(member.social_media_twitter)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Twitter/X"
|
||
>
|
||
<Twitter className="h-5 w-5 text-[#1DA1F2]" />
|
||
</a>
|
||
)}
|
||
|
||
{member.social_media_linkedin && (
|
||
<a
|
||
href={getSocialMediaLink(member.social_media_linkedin)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="LinkedIn"
|
||
>
|
||
<Linkedin className="h-5 w-5 text-[#0A66C2]" />
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* View Profile Button */}
|
||
<div className="pt-4 mt-4 border-t border-[#ddd8eb]">
|
||
<Button
|
||
onClick={() => handleViewProfile(member.id)}
|
||
className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full py-5"
|
||
>
|
||
<UserCircle className="h-4 w-4 mr-2" />
|
||
View Full Profile
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB]">
|
||
<Navbar />
|
||
|
||
<div className="max-w-7xl mx-auto py-12">
|
||
|
||
{/* Header and Search bar */}
|
||
<div className='px-9'>
|
||
|
||
{/* 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-[#422268] 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-[#664fa3] 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-[#664fa3]" />
|
||
<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-[#664fa3] focus:ring-[#664fa3]"
|
||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||
/>
|
||
</div>
|
||
{searchQuery && (
|
||
<p className="mt-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
{/* Border Decoration */}
|
||
|
||
<Border />
|
||
|
||
{/* Members Grid */}
|
||
{loading ? (
|
||
<div className="text-center py-20">
|
||
<p className="text-[#664fa3]" 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">
|
||
{paginatedMembers.map((member) => (
|
||
<MemberCard key={member.id} member={member} />
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-20">
|
||
<User className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
|
||
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||
{searchQuery ? 'No Members Found' : 'No Members in Directory'}
|
||
</h3>
|
||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{searchQuery
|
||
? 'Try adjusting your search query.'
|
||
: 'Members who opt in to the directory will appear here.'}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
|
||
|
||
{/* Border Decoration */}
|
||
<Border yaxis="true" />
|
||
|
||
{/* Info Card */}
|
||
{!loading && members.length > 0 && (
|
||
<Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
|
||
<div className="flex items-start gap-4">
|
||
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
|
||
<User className="h-6 w-6 text-[#664fa3]" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||
Want to appear in the directory?
|
||
</h3>
|
||
<p className="text-[#664fa3]" 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-[#ff9e77] hover:underline font-medium">
|
||
Edit your profile →
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
|
||
{/* Profile Detail Dialog */}
|
||
<Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
|
||
<DialogContent className="sm:max-w-[600px] bg-white rounded-2xl max-h-[90vh] overflow-y-auto">
|
||
{selectedMember && (
|
||
<>
|
||
<DialogHeader>
|
||
<DialogTitle className="text-3xl font-semibold text-[#422268]" 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-[#ff9e77]" />
|
||
<span className="text-[#664fa3]">Partner: {selectedMember.directory_partner_name}</span>
|
||
</DialogDescription>
|
||
)}
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-6 py-4">
|
||
{/* Bio */}
|
||
{selectedMember.directory_bio && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||
About
|
||
</h3>
|
||
<p className="text-[#664fa3] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{selectedMember.directory_bio}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Contact Information */}
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#422268] 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-[#F8F7FB]">
|
||
<Mail className="h-5 w-5 text-[#664fa3]" />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||
<a
|
||
href={`mailto:${selectedMember.directory_email}`}
|
||
className="text-[#422268] hover:text-[#664fa3] font-medium"
|
||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||
>
|
||
{selectedMember.directory_email}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedMember.directory_phone && (
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 rounded-lg bg-[#F8F7FB]">
|
||
<Phone className="h-5 w-5 text-[#664fa3]" />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
|
||
<a
|
||
href={`tel:${selectedMember.directory_phone}`}
|
||
className="text-[#422268] hover:text-[#664fa3] font-medium"
|
||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||
>
|
||
{selectedMember.directory_phone}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedMember.directory_address && (
|
||
<div className="flex items-start gap-3">
|
||
<div className="p-2 rounded-lg bg-[#F8F7FB]">
|
||
<MapPin className="h-5 w-5 text-[#664fa3]" />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
|
||
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{selectedMember.directory_address}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedMember.directory_dob && (
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 rounded-lg bg-[#F8F7FB]">
|
||
<Heart className="h-5 w-5 text-[#ff9e77]" />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
|
||
<p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||
{formatDate(selectedMember.directory_dob)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Volunteer Interests */}
|
||
{selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#422268] 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-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white"
|
||
>
|
||
{interest}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Social Media */}
|
||
{(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
|
||
selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||
Connect on Social Media
|
||
</h3>
|
||
<div className="flex gap-3">
|
||
{selectedMember.social_media_facebook && (
|
||
<a
|
||
href={getSocialMediaLink(selectedMember.social_media_facebook)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Facebook"
|
||
>
|
||
<Facebook className="h-6 w-6 text-[#1877F2]" />
|
||
</a>
|
||
)}
|
||
|
||
{selectedMember.social_media_instagram && (
|
||
<a
|
||
href={getSocialMediaLink(selectedMember.social_media_instagram)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Instagram"
|
||
>
|
||
<Instagram className="h-6 w-6 text-[#E4405F]" />
|
||
</a>
|
||
)}
|
||
|
||
{selectedMember.social_media_twitter && (
|
||
<a
|
||
href={getSocialMediaLink(selectedMember.social_media_twitter)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="Twitter/X"
|
||
>
|
||
<Twitter className="h-6 w-6 text-[#1DA1F2]" />
|
||
</a>
|
||
)}
|
||
|
||
{selectedMember.social_media_linkedin && (
|
||
<a
|
||
href={getSocialMediaLink(selectedMember.social_media_linkedin)}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
|
||
title="LinkedIn"
|
||
>
|
||
<Linkedin className="h-6 w-6 text-[#0A66C2]" />
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
|
||
|
||
{/* Pagination */}
|
||
{!loading && filteredMembers.length > 0 && (
|
||
<div className="mt-10 flex flex-col items-center gap-4 pb-12">
|
||
<p className="text-sm text-[#664fa3]" 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-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
|
||
>
|
||
First Page
|
||
</Button>
|
||
<Button
|
||
onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
|
||
disabled={currentPage === 1}
|
||
className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
|
||
>
|
||
Previous
|
||
</Button>
|
||
|
||
{Array.from({ length: totalPages }, (_, index) => {
|
||
const pageNumber = index + 1;
|
||
const isActive = pageNumber === currentPage;
|
||
return (
|
||
<Button
|
||
key={pageNumber}
|
||
onClick={() => setCurrentPage(pageNumber)}
|
||
className={
|
||
isActive
|
||
? "bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
|
||
: "bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full"
|
||
}
|
||
>
|
||
{pageNumber}
|
||
</Button>
|
||
);
|
||
})}
|
||
|
||
<Button
|
||
onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
|
||
disabled={currentPage === totalPages}
|
||
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
|
||
>
|
||
Next
|
||
</Button>
|
||
<Button
|
||
onClick={() => setCurrentPage(totalPages)}
|
||
disabled={currentPage === totalPages}
|
||
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
|
||
>
|
||
Last Page
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<MemberFooter />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MembersDirectory;
|