400 lines
23 KiB
TypeScript
400 lines
23 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Globe, Search, MapPin, Users, Heart, Building2, Phone, Mail,
|
|
ExternalLink, ChevronDown, ChevronUp, CheckCircle, Star, Filter,
|
|
Handshake, TreePine, BookOpen, Utensils, Paintbrush
|
|
} from 'lucide-react';
|
|
|
|
|
|
interface CommunityOrg {
|
|
id: string;
|
|
name: string;
|
|
category: string;
|
|
description: string;
|
|
address: string;
|
|
phone: string;
|
|
email: string;
|
|
website: string;
|
|
distance: string;
|
|
opportunities: string[];
|
|
partnershipType: 'community-service' | 'school-partnership' | 'both';
|
|
ageGroups: string[];
|
|
rating: number;
|
|
featured: boolean;
|
|
}
|
|
|
|
const COMMUNITY_DATA: CommunityOrg[] = [
|
|
{
|
|
id: '1', name: 'Sunshine Food Bank', category: 'Food & Nutrition',
|
|
description: 'Local food bank providing meals and groceries to families in need. Students can help sort donations, pack meal kits, and assist with distribution events.',
|
|
address: '1420 Community Blvd, Phoenix, AZ 85001', phone: '(602) 555-0142', email: 'volunteer@sunshinefoodbank.org', website: 'sunshinefoodbank.org',
|
|
distance: '2.3 mi', opportunities: ['Food sorting & packing', 'Distribution day volunteers', 'Holiday meal drive', 'Garden maintenance'],
|
|
partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 5, featured: true
|
|
},
|
|
{
|
|
id: '2', name: 'Desert Bloom Animal Shelter', category: 'Animal Welfare',
|
|
description: 'No-kill animal shelter that welcomes student volunteers for socialization programs. Great sensory-friendly environment for students with autism.',
|
|
address: '890 Paw Print Lane, Phoenix, AZ 85003', phone: '(602) 555-0198', email: 'education@desertbloom.org', website: 'desertbloomshelter.org',
|
|
distance: '3.1 mi', opportunities: ['Animal socialization visits', 'Pet supply drives', 'Kennel decoration projects', 'Reading to animals program'],
|
|
partnershipType: 'both', ageGroups: ['3-5', '6-8'], rating: 5, featured: true
|
|
},
|
|
{
|
|
id: '3', name: 'Valley Senior Living Center', category: 'Senior Services',
|
|
description: 'Assisted living facility offering intergenerational programs. Students visit weekly to share crafts, music, and conversation with residents.',
|
|
address: '2100 Golden Years Dr, Phoenix, AZ 85004', phone: '(602) 555-0167', email: 'activities@valleysenior.com', website: 'valleyseniorliving.com',
|
|
distance: '1.8 mi', opportunities: ['Weekly craft sessions', 'Music & performance visits', 'Holiday card making', 'Garden buddies program'],
|
|
partnershipType: 'community-service', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
|
|
},
|
|
{
|
|
id: '4', name: 'Phoenix Public Library — East Branch', category: 'Education & Literacy',
|
|
description: 'Local library branch with dedicated programs for special needs students. Offers sensory-friendly story times and adaptive technology workshops.',
|
|
address: '3500 E McDowell Rd, Phoenix, AZ 85008', phone: '(602) 555-0134', email: 'eastbranch@phoenixlib.org', website: 'phoenixpubliclibrary.org',
|
|
distance: '4.2 mi', opportunities: ['Book drive coordination', 'Reading buddy program', 'Library shelf organization', 'Story time assistants'],
|
|
partnershipType: 'school-partnership', ageGroups: ['K-2', '3-5'], rating: 4, featured: false
|
|
},
|
|
{
|
|
id: '5', name: 'Habitat for Humanity — Phoenix Chapter', category: 'Housing & Construction',
|
|
description: 'Building homes for families in need. Age-appropriate volunteer tasks available including painting, landscaping, and supply organization.',
|
|
address: '780 Builder Way, Phoenix, AZ 85006', phone: '(602) 555-0189', email: 'volunteer@habitatphx.org', website: 'habitatphoenix.org',
|
|
distance: '5.6 mi', opportunities: ['Supply sorting', 'Painting projects', 'Landscaping days', 'Fundraiser events'],
|
|
partnershipType: 'community-service', ageGroups: ['6-8'], rating: 5, featured: true
|
|
},
|
|
{
|
|
id: '6', name: 'Desert Botanical Garden', category: 'Environment & Nature',
|
|
description: 'Beautiful botanical garden offering educational partnerships and volunteer opportunities focused on desert ecology and conservation.',
|
|
address: '1201 N Galvin Pkwy, Phoenix, AZ 85008', phone: '(602) 555-0156', email: 'education@dbg.org', website: 'dbg.org',
|
|
distance: '6.1 mi', opportunities: ['Trail cleanup days', 'Seed planting workshops', 'Nature journaling', 'Butterfly garden maintenance'],
|
|
partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 5, featured: false
|
|
},
|
|
{
|
|
id: '7', name: 'Special Olympics Arizona', category: 'Sports & Recreation',
|
|
description: 'Year-round sports training and athletic competition for individuals with intellectual disabilities. Partnership opportunities for unified sports.',
|
|
address: '2100 S 75th Ave, Phoenix, AZ 85043', phone: '(602) 555-0145', email: 'programs@soaz.org', website: 'specialolympicsarizona.org',
|
|
distance: '8.4 mi', opportunities: ['Unified sports events', 'Cheer squad support', 'Event setup volunteers', 'Athlete buddy program'],
|
|
partnershipType: 'school-partnership', ageGroups: ['3-5', '6-8'], rating: 5, featured: true
|
|
},
|
|
{
|
|
id: '8', name: 'Community Arts Center', category: 'Arts & Culture',
|
|
description: 'Inclusive arts center offering adaptive art classes and exhibition opportunities. Students can participate in collaborative murals and gallery shows.',
|
|
address: '456 Creative Ave, Phoenix, AZ 85007', phone: '(602) 555-0178', email: 'info@communityarts.org', website: 'communityartsphx.org',
|
|
distance: '3.7 mi', opportunities: ['Collaborative mural projects', 'Art supply drives', 'Gallery exhibition setup', 'Adaptive art workshops'],
|
|
partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
|
|
},
|
|
{
|
|
id: '9', name: 'Ronald McDonald House', category: 'Family Support',
|
|
description: 'Provides housing and support for families with children receiving medical treatment. Students can help with meal preparation and activity kits.',
|
|
address: '501 E Thomas Rd, Phoenix, AZ 85012', phone: '(602) 555-0123', email: 'volunteer@rmhcphx.org', website: 'rmhcphoenix.org',
|
|
distance: '4.9 mi', opportunities: ['Meal preparation', 'Activity kit assembly', 'Holiday decoration', 'Card writing campaigns'],
|
|
partnershipType: 'community-service', ageGroups: ['3-5', '6-8'], rating: 5, featured: false
|
|
},
|
|
{
|
|
id: '10', name: 'Neighborhood Cleanup Coalition', category: 'Environment & Nature',
|
|
description: 'Organizes monthly neighborhood beautification projects. Great for teaching environmental responsibility and community pride.',
|
|
address: 'Various locations, Phoenix, AZ', phone: '(602) 555-0190', email: 'join@cleanupcoalition.org', website: 'phxcleanup.org',
|
|
distance: '1.0 mi', opportunities: ['Monthly park cleanups', 'Recycling drives', 'Community garden planting', 'Mural painting'],
|
|
partnershipType: 'community-service', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
|
|
},
|
|
];
|
|
|
|
const categoryIcons: Record<string, React.ReactNode> = {
|
|
'Food & Nutrition': <Utensils size={16} />,
|
|
'Animal Welfare': <Heart size={16} />,
|
|
'Senior Services': <Users size={16} />,
|
|
'Education & Literacy': <BookOpen size={16} />,
|
|
'Housing & Construction': <Building2 size={16} />,
|
|
'Environment & Nature': <TreePine size={16} />,
|
|
'Sports & Recreation': <Star size={16} />,
|
|
'Arts & Culture': <Paintbrush size={16} />,
|
|
'Family Support': <Handshake size={16} />,
|
|
};
|
|
|
|
const CommunityService: React.FC = () => {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [categoryFilter, setCategoryFilter] = useState('all');
|
|
const [typeFilter, setTypeFilter] = useState<'all' | 'community-service' | 'school-partnership' | 'both'>('all');
|
|
const [ageFilter, setAgeFilter] = useState('all');
|
|
const [expandedOrg, setExpandedOrg] = useState<string | null>(null);
|
|
const [savedOrgs, setSavedOrgs] = useState<Set<string>>(new Set());
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
|
|
const categories = [...new Set(COMMUNITY_DATA.map(o => o.category))];
|
|
|
|
const filteredOrgs = COMMUNITY_DATA.filter(org => {
|
|
const matchesSearch = searchQuery === '' ||
|
|
org.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
org.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
org.category.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesCategory = categoryFilter === 'all' || org.category === categoryFilter;
|
|
const matchesType = typeFilter === 'all' || org.partnershipType === typeFilter || org.partnershipType === 'both';
|
|
const matchesAge = ageFilter === 'all' || org.ageGroups.includes(ageFilter);
|
|
return matchesSearch && matchesCategory && matchesType && matchesAge;
|
|
});
|
|
|
|
const toggleSave = (id: string) => {
|
|
const next = new Set(savedOrgs);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
setSavedOrgs(next);
|
|
};
|
|
|
|
const typeColors: Record<string, string> = {
|
|
'community-service': 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
|
|
'school-partnership': 'bg-blue-500/15 text-blue-400 border-blue-500/30',
|
|
'both': 'bg-violet-500/15 text-violet-400 border-violet-500/30',
|
|
};
|
|
|
|
const typeLabels: Record<string, string> = {
|
|
'community-service': 'Community Service',
|
|
'school-partnership': 'School Partnership',
|
|
'both': 'Service & Partnership',
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-green-500/30">
|
|
<Globe size={20} className="text-white" />
|
|
</div>
|
|
Community Service & School Partnerships
|
|
</h2>
|
|
<p className="text-sm text-slate-400 mt-1">Discover local organizations for community service projects and school partnership opportunities</p>
|
|
</div>
|
|
|
|
{/* Info Banner */}
|
|
<div className="bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-teal-500/10 rounded-2xl border border-green-500/20 p-5">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-green-500/30">
|
|
<Handshake size={22} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-green-400 text-sm uppercase tracking-wider">Building Community Connections</h3>
|
|
<p className="text-slate-300 text-sm mt-1 leading-relaxed">
|
|
Explore local organizations that welcome school partnerships and community service projects. These opportunities help students develop social skills, build confidence, and contribute meaningfully to their community.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search & Filters */}
|
|
<div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
|
|
<div className="flex flex-col md:flex-row gap-3">
|
|
<div className="relative flex-1">
|
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={e => setSearchQuery(e.target.value)}
|
|
placeholder="Search organizations, categories, or keywords..."
|
|
className="w-full pl-9 pr-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-green-500/50 focus:border-green-500/50 outline-none"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-slate-300 hover:bg-slate-700 transition-colors"
|
|
>
|
|
<Filter size={14} />
|
|
Filters
|
|
{showFilters ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
|
</button>
|
|
</div>
|
|
|
|
{showFilters && (
|
|
<div className="mt-4 pt-4 border-t border-slate-700/40 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Category</label>
|
|
<select
|
|
value={categoryFilter}
|
|
onChange={e => setCategoryFilter(e.target.value)}
|
|
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
|
|
>
|
|
<option value="all">All Categories</option>
|
|
{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Type</label>
|
|
<select
|
|
value={typeFilter}
|
|
onChange={e => setTypeFilter(e.target.value as any)}
|
|
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
|
|
>
|
|
<option value="all">All Types</option>
|
|
<option value="community-service">Community Service</option>
|
|
<option value="school-partnership">School Partnership</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Age Group</label>
|
|
<select
|
|
value={ageFilter}
|
|
onChange={e => setAgeFilter(e.target.value)}
|
|
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
|
|
>
|
|
<option value="all">All Ages</option>
|
|
<option value="K-2">K-2</option>
|
|
<option value="3-5">3-5</option>
|
|
<option value="6-8">6-8</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats Bar */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{[
|
|
{ label: 'Organizations', value: COMMUNITY_DATA.length.toString(), color: 'from-green-500 to-emerald-600', icon: <Building2 size={18} /> },
|
|
{ label: 'Service Projects', value: COMMUNITY_DATA.filter(o => o.partnershipType !== 'school-partnership').length.toString(), color: 'from-emerald-500 to-teal-600', icon: <Heart size={18} /> },
|
|
{ label: 'School Partners', value: COMMUNITY_DATA.filter(o => o.partnershipType !== 'community-service').length.toString(), color: 'from-blue-500 to-indigo-600', icon: <Handshake size={18} /> },
|
|
{ label: 'Saved', value: savedOrgs.size.toString(), color: 'from-amber-500 to-orange-600', icon: <Star size={18} /> },
|
|
].map((stat, i) => (
|
|
<div key={i} className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${stat.color} flex items-center justify-center text-white shadow-lg`}>{stat.icon}</div>
|
|
<div>
|
|
<p className="text-2xl font-bold text-white">{stat.value}</p>
|
|
<p className="text-xs text-slate-500">{stat.label}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Results */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-slate-400">{filteredOrgs.length} organization{filteredOrgs.length !== 1 ? 's' : ''} found</p>
|
|
</div>
|
|
|
|
{filteredOrgs.map(org => (
|
|
<div key={org.id} className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border transition-all duration-200 overflow-hidden ${
|
|
expandedOrg === org.id ? 'border-green-500/30' : 'border-slate-700/40 hover:border-slate-600/50'
|
|
}`}>
|
|
<div
|
|
className="p-5 cursor-pointer"
|
|
onClick={() => setExpandedOrg(expandedOrg === org.id ? null : org.id)}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-start gap-4 min-w-0 flex-1">
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/20 flex items-center justify-center flex-shrink-0 text-green-400">
|
|
{categoryIcons[org.category] || <Globe size={16} />}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h3 className="font-semibold text-white text-base">{org.name}</h3>
|
|
{org.featured && (
|
|
<span className="px-2 py-0.5 bg-amber-500/15 text-amber-400 border border-amber-500/30 rounded-lg text-[10px] font-semibold">FEATURED</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-1 flex-wrap">
|
|
<span className={`px-2 py-0.5 rounded-lg text-[10px] font-semibold border ${typeColors[org.partnershipType]}`}>
|
|
{typeLabels[org.partnershipType]}
|
|
</span>
|
|
<span className="text-xs text-slate-500 flex items-center gap-1">
|
|
<MapPin size={10} /> {org.distance}
|
|
</span>
|
|
<span className="text-xs text-slate-500">{org.category}</span>
|
|
</div>
|
|
<p className="text-sm text-slate-400 mt-2 line-clamp-2">{org.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<button
|
|
onClick={e => { e.stopPropagation(); toggleSave(org.id); }}
|
|
className={`p-2 rounded-xl transition-all ${savedOrgs.has(org.id) ? 'bg-amber-500/15 text-amber-400' : 'bg-slate-700/50 text-slate-500 hover:text-amber-400'}`}
|
|
>
|
|
<Star size={16} fill={savedOrgs.has(org.id) ? 'currentColor' : 'none'} />
|
|
</button>
|
|
{expandedOrg === org.id ? <ChevronUp size={18} className="text-slate-500" /> : <ChevronDown size={18} className="text-slate-500" />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{expandedOrg === org.id && (
|
|
<div className="px-5 pb-5 space-y-4 border-t border-slate-700/40 pt-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Contact Info */}
|
|
<div className="bg-slate-700/30 rounded-xl p-4 space-y-3">
|
|
<h4 className="font-semibold text-sm text-white flex items-center gap-2">
|
|
<Building2 size={14} className="text-green-400" /> Contact Information
|
|
</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<MapPin size={14} className="text-slate-500 flex-shrink-0" />
|
|
<span>{org.address}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<Phone size={14} className="text-slate-500 flex-shrink-0" />
|
|
<span>{org.phone}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<Mail size={14} className="text-slate-500 flex-shrink-0" />
|
|
<a href={`mailto:${org.email}`} className="text-green-400 hover:text-green-300">{org.email}</a>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<ExternalLink size={14} className="text-slate-500 flex-shrink-0" />
|
|
<a href={`https://${org.website}`} target="_blank" rel="noopener noreferrer" className="text-green-400 hover:text-green-300">{org.website}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Opportunities */}
|
|
<div className="bg-slate-700/30 rounded-xl p-4">
|
|
<h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-3">
|
|
<CheckCircle size={14} className="text-emerald-400" /> Available Opportunities
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{org.opportunities.map((opp, i) => (
|
|
<div key={i} className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
|
|
<span className="text-sm text-slate-300">{opp}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Age Groups & Actions */}
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pt-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-slate-500">Age Groups:</span>
|
|
{org.ageGroups.map(age => (
|
|
<span key={age} className="px-2 py-0.5 bg-slate-700/50 text-slate-300 rounded-lg text-xs font-medium border border-slate-600/50">{age}</span>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-green-500/25 transition-all">
|
|
Contact Organization
|
|
</button>
|
|
<button
|
|
onClick={() => toggleSave(org.id)}
|
|
className={`px-4 py-2 rounded-xl text-sm font-medium border transition-all ${
|
|
savedOrgs.has(org.id)
|
|
? 'bg-amber-500/15 text-amber-400 border-amber-500/30'
|
|
: 'bg-slate-700/50 text-slate-300 border-slate-600/50 hover:border-amber-500/30'
|
|
}`}
|
|
>
|
|
{savedOrgs.has(org.id) ? 'Saved' : 'Save'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{filteredOrgs.length === 0 && (
|
|
<div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-12 text-center">
|
|
<Globe size={40} className="text-slate-600 mx-auto mb-3" />
|
|
<h3 className="font-semibold text-white mb-1">No organizations found</h3>
|
|
<p className="text-sm text-slate-400">Try adjusting your search or filters to find more opportunities.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommunityService;
|