Public
Back
Version 3
12/24/2024
/** @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";
function App() {
const [verse, setVerse] = useState<{ text: string; surah: string } | null>(null);
const [error, setError] = useState<string | null>(null);
const fetchVerse = async (surahNumber: number, verseNumber: number) => {
try {
const response = await fetch(`/quran/${surahNumber}/${verseNumber}`);
if (!response.ok) throw new Error('Verse not found');
const data = await response.json();
setVerse(data);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'An unknown error occurred');
setVerse(null);
}
};
return (
<div style={{
fontFamily: 'Arial, sans-serif',
maxWidth: '600px',
margin: '0 auto',
padding: '20px'
}}>
<h1>🕌 Quran Verse Finder</h1>
<div>
<label>
Surah Number:
<input
type="number"
min="1"
max="114"
rahil224-alquranapiproxy.web.val.run
Updated: December 24, 2024