muddyAmethystLimpetmain.tsx7 matches
1// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,2// and display them on a big calendar. We'll use react-big-calendar for the calendar component,3// and pdf.js for PDF parsing. The server will handle PDF processing and event extraction.45/** @jsxImportSource https://esm.sh/react */6import React, { useState, useEffect } from "https://esm.sh/react";7import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";8import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";9import { createEvents } from "https://esm.sh/ics@3.1.0";10import moment from "https://esm.sh/moment";1112// Set up the localizer for react-big-calendar13const localizer = momentLocalizer(moment);14177<head>178<title>Calendar Event Extractor</title>179<link rel="stylesheet" href="https://esm.sh/react-big-calendar/lib/css/react-big-calendar.css">180<style>${css}</style>181</head>
calendarEventExtractormain.tsx7 matches
1// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,2// and display them on a big calendar. We'll use react-big-calendar for the calendar component,3// and pdf.js for PDF parsing. The server will handle PDF processing and event extraction.45/** @jsxImportSource https://esm.sh/react */6import React, { useState, useEffect } from "https://esm.sh/react";7import { createRoot } from "https://esm.sh/react-dom/client";8import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";9import moment from "https://esm.sh/moment";1011// Set up the localizer for react-big-calendar12const localizer = momentLocalizer(moment);13137<head>138<title>Calendar Event Extractor</title>139<link rel="stylesheet" href="https://esm.sh/react-big-calendar/lib/css/react-big-calendar.css">140<style>${css}</style>141</head>
closedChocolateMarmosetmain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";3import dagre from "https://esm.sh/cytoscape-dagre@2.5.0";4import cytoscape from "https://esm.sh/cytoscape@3.23.0";5import React, { useEffect, useRef, useState } from "https://esm.sh/react";6import { createRoot } from "https://esm.sh/react-dom/client";78cytoscape.use(dagre);
lucia_middleware_vanillamain.tsx2 matches
3// The main tradeoff is the complexity of setting up Lucia, but it offers robust auth features.45/** @jsxImportSource https://esm.sh/react */6import { ValTownAdapter } from "https://esm.town/v/yawnxyz/lucia_adapter_valtown";7import { createUser, getUser, verifyPassword } from "https://esm.town/v/yawnxyz/lucia_sqlite";8import { Lucia, Session, User } from "npm:lucia@3.0.1";9import { renderToString } from "npm:react-dom/server";10import { CookieJar } from "https://deno.land/x/cookies/mod.ts";11
1/** @jsxImportSource https://esm.sh/react */2import { ExternalLinkIcon } from "https://esm.sh/@chakra-ui/icons";3import {10useColorModeValue,11VStack,12} from "https://esm.sh/@chakra-ui/react";13import * as React from "https://esm.sh/react";14// import React, { useEffect, useState } from "https://esm.sh/react";15import { createRoot } from "https://esm.sh/react-dom/client";1617import itinerary from "https://esm.town/v/namwen/veryTealAardvark";1819import { renderToString } from "npm:react-dom/server";2021function printItinerary() {
theHereTimesmain.tsx34 matches
1617import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.2";18import ReactDOM from "https://esm.sh/react-dom@18.2.0";19import React from "https://esm.sh/react@18.2.0";2021function App() {22const mapRef = React.useRef(null);23const [map, setMap] = React.useState(null);24const [center, setCenter] = React.useState({ lat: 40.7128, lng: -74.006 });25const [zoom, setZoom] = React.useState(10);26const [news, setNews] = React.useState([]);27const [locations, setLocations] = React.useState([]);28const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);29const [error, setError] = React.useState(null);30const markersRef = React.useRef([]);31const [googleMaps, setGoogleMaps] = React.useState(null);32const [selectedLocation, setSelectedLocation] = React.useState(null);33const [searchQuery, setSearchQuery] = React.useState("");34const searchBoxRef = React.useRef(null);3536React.useEffect(() => {37const initMap = async () => {38try {106}, []);107108React.useEffect(() => {109if (map && locations.length > 0 && googleMaps) {110console.log("Updating markers. Number of locations:", locations.length);204};205206const filteredNews = React.useMemo(() => {207if (!selectedLocation) return [];208return news.filter(article => article.title.toLowerCase().includes(selectedLocation.name.toLowerCase()));209}, [news, selectedLocation]);210211return React.createElement(212"div",213{ style: { display: "flex", flexDirection: "column", height: "100vh" } },214React.createElement(215"div",216{ id: "search-container", className: "search-container" },217React.createElement("input", {218id: "search-input",219type: "text",223}),224),225React.createElement("div", { ref: mapRef, style: { flexGrow: 1 } }),226isDrawerOpen && React.createElement(227"div",228{ className: "drawer" },229React.createElement("button", { onClick: () => setIsDrawerOpen(false), className: "close-button" }, "×"),230React.createElement("h2", null, selectedLocation ? `News for ${selectedLocation.name}` : "Local News"),231error232? React.createElement("p", { className: "error" }, error)233: filteredNews.length > 0234? filteredNews.map((article, index) =>235React.createElement(236"div",237{ key: index, className: "article" },238React.createElement("h3", null, article.title),239React.createElement("p", null, article.description),240React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer" }, "Read more"),241)242)243: React.createElement("p", null, "No news articles found for this location."),244),245React.createElement(246"div",247{ className: "attribution" },248React.createElement(249"a",250{260261function client() {262ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));263}264
infoboxCrawlermain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";3import dagre from "https://esm.sh/cytoscape-dagre@2.5.0";4import cytoscape from "https://esm.sh/cytoscape@3.23.0";5import React, { useEffect, useRef, useState } from "https://esm.sh/react";6import { createRoot } from "https://esm.sh/react-dom/client";78cytoscape.use(dagre);
infoboxCrawlermain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";3import dagre from "https://esm.sh/cytoscape-dagre@2.5.0";4import cytoscape from "https://esm.sh/cytoscape@3.23.0";5import React, { useEffect, useRef, useState } from "https://esm.sh/react";6import { createRoot } from "https://esm.sh/react-dom/client";78cytoscape.use(dagre);
todoListUsingBlobmain.tsx3 matches
1/** @jsxImportSource https://esm.sh/react */2import React, { useEffect, useState } from "https://esm.sh/react";3import { createRoot } from "https://esm.sh/react-dom/client";45function App() {
valcontributionchartmain.tsx4 matches
1// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,2// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,3// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.45/** @jsxImportSource https://esm.sh/react */6import React, { useState, useEffect } from "https://esm.sh/react";7import { createRoot } from "https://esm.sh/react-dom/client";89function App() {
