/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const officeApps = [ { name: "Word", description: "Word processing and document creation", icon: "📄" }, { name: "Excel", description: "Spreadsheet and data analysis", icon: "📊" }, { name: "PowerPoint", description: "Presentation creation and design", icon: "🖼️" }, { name: "Outlook", description: "Email and personal information management", icon: "✉️" }, { name: "OneNote", description: "Digital note-taking application", icon: "📝" } ]; return (

Microsoft Office Apps

{officeApps.map((app, index) => (

{app.icon}

{app.name}

{app.description}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Microsoft Office Apps

`, { headers: { "content-type": "text/html" } }); } const styles = { container: { fontFamily: 'system-ui, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px', textAlign: 'center' }, title: { color: '#1a73e8', marginBottom: '30px' }, grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }, card: { border: '1px solid #e0e0e0', borderRadius: '8px', padding: '20px', backgroundColor: '#f9f9f9' }, icon: { fontSize: '48px', marginBottom: '10px' }, appName: { color: '#1a73e8', marginBottom: '10px' }, description: { color: '#666' }, footer: { marginTop: '30px', fontSize: '12px' }, sourceLink: { color: '#666', textDecoration: 'none' } };

steadyLimeChipmunk