/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const SufismContent = { history: `Sufism, or Islamic mysticism, emerged in the early centuries of Islam as a spiritual dimension focused on inner purification and direct personal experience of the Divine. Rooted in the Quranic teachings and the practices of Prophet Muhammad, Sufism emphasizes love, spiritual growth, and the path of self-discovery.`, principles: [ "Divine Love (Ishq)", "Spiritual Purification (Tazkiyah)", "Remembrance of God (Dhikr)", "Spiritual Guidance (Murshid)", "Annihilation of the Ego (Fana)" ], keyFigures: [ { name: "Rumi", description: "Persian poet and mystic, known for profound spiritual poetry" }, { name: "Al-Ghazali", description: "Theologian who systematized Sufi thought" }, { name: "Ibn Arabi", description: "Andalusian philosopher and poet of divine love" } ] }; function App() { const [activeSection, setActiveSection] = useState('history'); return (

🕌 Sufism: The Mystical Path of Islam

{Object.keys(SufismContent).map(section => ( ))}

{activeSection === 'history' &&

{SufismContent.history}

} {activeSection === 'principles' && (

✨ {principle}

)} {activeSection === 'keyFigures' && (

{SufismContent.keyFigures.map(figure => (

🌟 {figure.name}

{figure.description}

))}

)}

); } const styles = { container: { fontFamily: 'system-ui, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px', backgroundColor: '#f4f4f4', color: '#333' }, title: { textAlign: 'center', color: '#2c3e50' }, navigation: { display: 'flex', justifyContent: 'center', marginBottom: '20px' }, navButton: { margin: '0 10px', padding: '10px 15px', border: '1px solid #3498db', backgroundColor: 'white', cursor: 'pointer', borderRadius: '5px' }, activeNavButton: { backgroundColor: '#3498db', color: 'white' }, content: { backgroundColor: 'white', padding: '20px', borderRadius: '10px', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }, listItem: { margin: '10px 0', padding: '5px 0' }, figureCard: { backgroundColor: '#f9f9f9', margin: '10px 0', padding: '15px', borderRadius: '5px' }, footer: { marginTop: '20px', textAlign: 'center' }, sourceLink: { color: '#3498db', textDecoration: 'none' } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Sufism: The Mystical Path

`, { headers: { "content-type": "text/html" } }); }

sajidhussain