/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function BusinessDetailsModal({ business, onClose }) { if (!business) return null; return (

{business.name}

Sector: {business.sector || 'Not specified'}

Address: {business.address || 'Address not available'}

Phone: {business.phone || 'Phone not available'}

Email: {business.email || 'Email not available'}

); } function App() { const [postcode, setPostcode] = useState(""); const [sector, setSector] = useState(""); const [sectorInput, setSectorInput] = useState(""); const [results, setResults] = useState([]); const [selectedBusiness, setSelectedBusiness] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); // Fetch businesses from server const fetchBusinesses = async () => { setIsLoading(true); setError(null); try { const response = await fetch(`/api/search?postcode=${postcode}§or=${sector}`); if (!response.ok) { throw new Error('Search failed'); } const data = await response.json(); setResults(data.businesses || []); } catch (err) { setError(err.message); setResults([]); } finally { setIsLoading(false); } }; // Manual search function const handleManualSearch = () => { fetchBusinesses(); }; // Unique sectors from the results const availableSectors = [...new Set(results.map(b => b.sector).filter(Boolean))]; // Filter sectors based on input const filteredSectors = availableSectors.filter(s => s.toLowerCase().includes(sectorInput.toLowerCase()) ); return (

Business Search

setPostcode(e.target.value)} style={styles.input} maxLength={6} />

setSectorInput(e.target.value)} style={styles.input} />

{error && (

{error}

)}

Results {results.length > 0 ? `(${results.length})` : ''}

{results.length === 0 ? (

No businesses found

) : ( {results.map((biz, index) => ( ))}

Name	Sector	Postcode	Address	Phone	Details
{biz.name}	{biz.sector \|\| 'N/A'}	{biz.postcode}	{biz.address \|\| 'N/A'}	{biz.phone \|\| 'N/A'}

)}

{selectedBusiness && ( setSelectedBusiness(null)} /> )}

); } const styles = { container: { fontFamily: 'Arial, sans-serif', maxWidth: '900px', margin: '0 auto', padding: '20px', }, searchContainer: { display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '20px', }, sectorSearchContainer: { display: 'flex', gap: '10px', }, input: { flex: 1, padding: '10px', fontSize: '16px', }, searchButton: { padding: '10px', fontSize: '16px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', }, errorMessage: { color: 'red', marginBottom: '10px', }, resultsContainer: { marginTop: '20px', overflowX: 'auto', }, table: { width: '100%', borderCollapse: 'collapse', }, tableRow: { borderBottom: '1px solid #ddd', }, detailsButton: { backgroundColor: '#007bff', color: 'white', border: 'none', padding: '5px 10px', borderRadius: '4px', cursor: 'pointer', }, modalOverlay: { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000, }, modalContent: { backgroundColor: 'white', padding: '20px', borderRadius: '8px', width: '400px', maxWidth: '90%', }, closeButton: { marginTop: '15px', padding: '10px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Get API key from environment variables const API_KEY = Deno.env.get('BUSINESS_SEARCH_API_KEY'); // Check if it's an API request const url = new URL(request.url); if (url.pathname === '/api/search') { const postcode = url.searchParams.get('postcode') || ''; const sector = url.searchParams.get('sector') || ''; try { // Use a business directory API (Replace with actual API) const apiResponse = await fetch(`https://api.example.com/businesses?postcode=${postcode}§or=${sector}`, { headers: { 'Authorization': `Bearer ${API_KEY}`, 'Content-Type': 'application/json' } }); if (!apiResponse.ok) { throw new Error('Failed to fetch businesses'); } const data = await apiResponse.json(); return new Response(JSON.stringify({ businesses: data.map(business => ({ name: business.name, sector: business.sector, postcode: business.postcode, address: business.address, phone: business.phone, email: business.email })) }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Search failed', details: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Serve the main HTML return new Response(` Business Search

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

Fairestofthemall