[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6993cea518a08191aff96dfabecb7792","versionInt","title","EagleM International Church - Website (react)","type","code/react","content","import React, { useEffect, useState } from 'react';\n\n// EagleM International Church - Single-file React component\n// - Tailwind CSS utility classes used for layout/styling\n// - Stores membership entries in localStorage (no backend required)\n// - Embeds Facebook photos area using Facebook public page URL (iframe fallback)\n// - Replace FACEBOOK_PAGE_URL and FACEBOOK_DESCRIPTION with your official copy if desired\n\nconst FACEBOOK_PAGE_URL = 'https://m.facebook.com/100068616113209';\n\n// Short description copied from the church's Facebook page (editable)\nconst FACEBOOK_DESCRIPTION = `EMIC is a multi-racial, multi-generational, multi-culture, and evangelistic online church. We're nontraditional in our approach, traditional in our core beliefs, and passionate about outreach.`;\n\nfunction useLocalStorage(key, initial) {\n const [state, setState] = useState(() => {\n try {\n const raw = localStorage.getItem(key);\n return raw ? JSON.parse(raw) : initial;\n } catch (e) {\n console.error('localStorage read error', e);\n return initial;\n }\n });\n\n useEffect(() => {\n try {\n localStorage.setItem(key, JSON.stringify(state));\n } catch (e) {\n console.error('localStorage write error', e);\n }\n }, [key, state]);\n\n return [state, setState];\n}\n\nexport default function EMICSite() {\n const [members, setMembers] = useLocalStorage('emic_members', []);\n const [form, setForm] = useState({ fullName: '', address: '', email: '', whatsapp: '' });\n const [search, setSearch] = useState('');\n\n function addMember(e) {\n e.preventDefault();\n if (!form.fullName || !form.email) return alert('Please provide at least a name and email.');\n const newItem = { id: Date.now(), ...form };\n setMembers([newItem, ...members]);\n setForm({ fullName: '', address: '', email: '', whatsapp: '' });\n }\n\n function removeMember(id) {\n if (!confirm('Remove this member?')) return;\n setMembers(members.filter(m => m.id !== id));\n }\n\n function exportCSV() {\n if (!members.length) return alert('No members to export.');\n const header = ['Full Name', 'Address', 'Email', 'WhatsApp'].join(',') + '\\n';\n const rows = members.map(m => [m.fullName, m.address, m.email, m.whatsapp].map(cell => '\"' + (cell || '') + '\"').join(',')).join('\\n');\n const csv = header + rows;\n const blob = new Blob([csv], { type: 'text/csv' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'emic_members.csv';\n a.click();\n URL.revokeObjectURL(url);\n }\n\n const filtered = members.filter(m =>\n [m.fullName, m.address, m.email, m.whatsapp].join(' ').toLowerCase().includes(search.toLowerCase())\n );\n\n return (\n

Eagle-M International Church — Online

A multi-racial, multi-generational, evangelistic online church

\n \n

\n\n

\n {/* About / Description */}\n

About Eagle-M International Church

{FACEBOOK_DESCRIPTION}

\n\n

Service times & broadcasts

Weekly live broadcasts and recorded sermons are shared on our Facebook and broadcast channels. Check our Facebook page for the latest schedule and live video links.

\n\n {/* Membership Form */}\n

Join / New Membership

\n Full name\n setForm({ ...form, fullName: e.target.value })} className=\"w-full mt-1 p-2 border rounded\" placeholder=\"Jane Doe\" />\n

\n Address\n setForm({ ...form, address: e.target.value })} className=\"w-full mt-1 p-2 border rounded\" placeholder=\"City, State\" />\n

\n Email\n setForm({ ...form, email: e.target.value })} className=\"w-full mt-1 p-2 border rounded\" placeholder=\"you@example.com\" />\n

\n WhatsApp number\n setForm({ ...form, whatsapp: e.target.value })} className=\"w-full mt-1 p-2 border rounded\" placeholder=\"+1 555 555 5555\" />\n

\n \n \n

\n\n

Members ({members.length})

\n setSearch(e.target.value)} className=\"w-full mt-2 p-2 border rounded\" />\n

\n
\n
{m.fullName}
\n
{m.email} • {m.whatsapp}
\n
{m.address}
\n
\n
\n \n
\n
No members found.

\n\n {/* Photos / Facebook embed */}\n

Photos from our Facebook page

\n\n

Public photos and posts are available on our Facebook page. If you want a native gallery, replace the iframe with a Graph API feed (requires an access token and a small backend). The iframe below points to the mobile Facebook page for better cross-origin behavior.

\n\n