andika/membership-fe
3
1
Fork 1
Code Issues 20 Pull Requests Actions Packages Projects Releases Wiki Activity

many styling changes and updates

Browse Source
This commit is contained in:
kayela
2026-02-04 16:57:25 -06:00
parent 79a727e7ba
commit 356031ad15
21 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/members/MembersDirectory.js
View File

@@ -14,13 +14,33 @@ import {
DialogHeader,
DialogTitle,
} from '../../components/ui/dialog';
import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
import {
User,
Search,
Mail,
MapPin,
Phone,
Heart,
Facebook,
Instagram,
Twitter,
Linkedin,
CircleUserRound,
Calendar,
ChevronsRight,
ChevronRight,
ChevronLeft,
ChevronsLeft,
UserRound
} from 'lucide-react';
import { useToast } from '../../hooks/use-toast';
import MemberCard from '../../components/MemberCard';
import MemberBadge from '../../components/MemberBadge';
import useMembers from '../../hooks/use-members';
import useMemberTiers from '../../hooks/use-member-tiers';
import useDirectoryConfig from '../../hooks/use-directory-config';
import { useThemeConfig } from '@/context/ThemeConfigContext';
const MembersDirectory = () => {
const [selectedMember, setSelectedMember] = useState(null);
@@ -37,6 +57,12 @@ const MembersDirectory = () => {
}
return status;
}, []);
const { getLogoUrl } = useThemeConfig();
// Get logo URL from theme config (with fallback to default)
const logo = getLogoUrl();
const normalizeMembers = useCallback(
(data) => {
const list = Array.isArray(data)
@@ -147,18 +173,27 @@ const MembersDirectory = () => {
<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-[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 members in the directory: </span> <span className='text-brand-purple font-medium'>{totalMembers}</span>
</p>
<div className="my-8 mb-8 mt-14 gap-4 flex flex-col sm:flex-row items-center ">
<Link to="/dashboard">
<img src={logo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
<div className='flex flex-col items-start'>
<h1 className="text-4xl md:text-5xl font-bold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
Members Directory
</h1>
<p className="text-lg font-bold flex gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<UserRound className='text-brand-purple/80' />
<span className='text-foreground'>Active Members Count: </span> <span className='text-brand-purple font-medium'>{totalMembers}</span>
</p>
</div>
</div>
{/* Search Bar */}
<div className="mb-24 w-full">
<div className=" w-full flex gap-3">
<div className="relative w-full ">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
<Input
type="text"
@@ -169,17 +204,19 @@ const MembersDirectory = () => {
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
{searchQuery && (
<p className="mt-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
</p>
)}
<Button size='lg' className='self-center bg-brand-purple hover:bg-brand-purple/90 px-16'>Search</Button>
<Button className='text-brand-purple/80 bg-transparent hover:bg-transparent hover:underline shadow-none p-2 self-center'>Clear Search</Button>
</div>
{searchQuery && (
<p className="mt-3 text-sm ml-6 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif " }}>
Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
</p>
)}
<div className='mb-24'></div>
</div>
{/* Border Decoration */}
<Border />
<Border className='' />
{/* Members Grid */}
{loading ? (
@@ -206,23 +243,21 @@ const MembersDirectory = () => {
</div>
)}
{/* Border Decoration */}
<Border yaxis="true" />
{/* todo: use badge to display if member */}
{/* 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-4 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-brand-purple " />
<div className="bg-[var(--neutral-800)]/20 rounded-lg">
<CircleUserRound className="size-20 text-brand-lavender " />
</div>
<div>
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className='self-center'>
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Poppins', sans-serif" }}>
Want to appear in the directory?
</h3>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple/90 font-medium " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
<Link to="/profile" className="text-[var(--orange-light)] hover:underline font-medium">
@@ -432,16 +467,16 @@ const MembersDirectory = () => {
<Button
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white"
className="bg-transparent text-brand-purple shadow-none "
>
First Page
<ChevronsLeft />
</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-brand-purple hover:text-white"
className="bg-transparent text-brand-purple shadow-none"
>
Previous
<ChevronLeft size={64} />
</Button>
{Array.from({ length: totalPages }, (_, index) => {
@@ -465,16 +500,17 @@ 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-brand-purple rounded-full hover:text-white"
className="bg-transparent text-brand-purple shadow-none"
>
Next
<ChevronRight />
</Button>
<Button
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple rounded-full hover:text-white"
className="bg-transparent text-brand-purple shadow-none"
>
Last Page
<ChevronsRight />
</Button>
</div>
</div>