fix: styling and search button functionality.
fix: member footer matches public footer
This commit is contained in:
@@ -1,20 +1,22 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lucide-react';
|
||||
import { useThemeConfig } from '@/context/ThemeConfigContext';
|
||||
import { Button } from './ui/button';
|
||||
|
||||
const MemberFooter = () => {
|
||||
const { getLogoUrl } = useThemeConfig();
|
||||
const loafLogo = getLogoUrl();
|
||||
return (
|
||||
<footer className="bg-brand-dark-lavender text-white mt-auto">
|
||||
<footer className="bg-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] text-white mt-auto">
|
||||
<div className="max-w-7xl mx-auto px-6 py-12">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-8">
|
||||
{/* Logo & About */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
LOAF
|
||||
</h3>
|
||||
<p className="text-gray-300 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Lesbians Over Age Fifty
|
||||
</p>
|
||||
<div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
|
||||
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Member Resources */}
|
||||
@@ -100,11 +102,27 @@ const MemberFooter = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* donate button */}
|
||||
<div className="flex flex-col gap-2 items-center self-start justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
|
||||
<div className="pb-4 w-full flex justify-center lg:justify-start">
|
||||
<Link to="/donate" className="block">
|
||||
<Button className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
|
||||
Donate
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-[var(--neutral-800)] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
LOAF is supported by<br />the Hollyfield Foundation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-[var(--purple-lavender)]">
|
||||
<div className="bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)]">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-300" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<div className="flex gap-6">
|
||||
|
||||
@@ -108,6 +108,29 @@ const MembersDirectory = () => {
|
||||
fetchErrorMessage: 'Failed to load members directory. Please try again.',
|
||||
onFetchError: handleFetchError
|
||||
});
|
||||
const [searchInput, setSearchInput] = useState(searchQuery);
|
||||
|
||||
const handleSearch = useCallback(() => {
|
||||
const nextQuery = searchInput.trim();
|
||||
setSearchInput(nextQuery);
|
||||
setSearchQuery(nextQuery);
|
||||
}, [searchInput, setSearchQuery]);
|
||||
|
||||
const handleClearSearch = useCallback(() => {
|
||||
setSearchInput('');
|
||||
setSearchQuery('');
|
||||
}, [setSearchQuery]);
|
||||
|
||||
const handleSearchKeyDown = useCallback((event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
handleSearch();
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
handleClearSearch();
|
||||
}
|
||||
}, [handleClearSearch, handleSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
@@ -198,14 +221,26 @@ const MembersDirectory = () => {
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by name or bio..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={handleSearchKeyDown}
|
||||
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-brand-purple focus:ring-brand-purple "
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<Button
|
||||
size='lg'
|
||||
className='self-center bg-brand-purple hover:bg-brand-purple/90 px-16'
|
||||
onClick={handleSearch}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
<Button
|
||||
className='text-brand-purple/80 bg-transparent hover:bg-transparent hover:underline shadow-none p-2 self-center'
|
||||
onClick={handleClearSearch}
|
||||
>
|
||||
Clear Search
|
||||
</Button>
|
||||
</div>
|
||||
{searchQuery && (
|
||||
<p className="mt-3 text-sm ml-6 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif " }}>
|
||||
@@ -488,8 +523,8 @@ const MembersDirectory = () => {
|
||||
onClick={() => setCurrentPage(pageNumber)}
|
||||
className={
|
||||
isActive
|
||||
? "bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full"
|
||||
: "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full"
|
||||
? "bg-brand-purple text-white rounded-full hover:bg-brand-purple"
|
||||
: "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full "
|
||||
}
|
||||
>
|
||||
{pageNumber}
|
||||
|
||||
Reference in New Issue
Block a user