1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
1/** @jsxImportSource npm:react */
2import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
3import { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
4import { serveRequest } from "https://esm.town/v/vawogbemi/reqEvaltown";
5import { Hono } from "npm:hono";
6import React from "npm:react";
7import { renderToString } from "npm:react-dom/server";
8
9const { httpEndpoint } = extractValInfo(import.meta.url);
1/** @jsxImportSource https://esm.sh/react */
2import { Social } from "https://esm.sh/@builddao/near-social-js";
3import confetti from "https://esm.sh/canvas-confetti@1.6.0";
4import React, { useEffect, useState } from "https://esm.sh/react";
5import { createRoot } from "https://esm.sh/react-dom/client";
6import ReactMarkdown from "https://esm.sh/react-markdown@8.0.7";
7
8type Profile = {
136 <p className="text-gray-600 mb-4">@{accountId}</p>
137 <div className="text-left text-gray-700 mb-6 markdown-content bg-gray-50 p-4 rounded-lg shadow-inner">
138 <ReactMarkdown>{profile?.description || ""}</ReactMarkdown>
139 </div>
140 <div className="flex flex-wrap justify-center gap-3 mt-6">
1/** @jsxImportSource https://esm.sh/react */
2import { createFalClient } from "https://esm.sh/@fal-ai/client";
3import React, { useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";
6
10 const [loading, setLoading] = useState(false);
11
12 const generateImage = async (e?: React.FormEvent) => {
13 e?.preventDefault();
14 setLoading(true);
1/** @jsxImportSource https://esm.sh/react */
2
3import React, { useCallback, useEffect, useReducer, useRef, useState } from "https://esm.sh/react";
4import { hydrateRoot } from "https://esm.sh/react-dom/client";
5import { renderToString } from "https://esm.sh/react-dom/server";
6import { hnSearch } from "https://esm.town/v/stevekrouse/hnSearch";
7import About from "https://esm.town/v/vawogbemi/whoIsHiringAbout";
4HonoJs doesn't support render for async components so the style is off for the home page.
5
6And the state changes don't register in html rendering so thinking of using react instead.
1/** @jsxImportSource https://esm.sh/react */
2import { createFalClient } from "https://esm.sh/@fal-ai/client";
3import React, { useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";
6
10 const [loading, setLoading] = useState(false);
11
12 const generateImage = async (e?: React.FormEvent) => {
13 e?.preventDefault();
14 setLoading(true);
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import ReactMarkdown from "https://esm.sh/react-markdown";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
6import { vscDarkPlus } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";
7
8function App() {
19 }, []);
20
21 const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
22 const newLanguage = e.target.value;
23 setLanguage(newLanguage);
25 };
26
27 const handleSubmit = async (e: React.FormEvent) => {
28 e.preventDefault();
29 setLoading(true);
69 <div className="response-container">
70 <h2>Generated Response:</h2>
71 <ReactMarkdown
72 children={response}
73 components={{
1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import DatePicker from "https://esm.sh/react-datepicker";
5import { createRoot } from "https://esm.sh/react-dom/client";
6import Stripe from "https://esm.sh/stripe";
7
8const datePickerStyles = `
9 .react-datepicker {
10 font-family: Arial, sans-serif;
11 border: 1px solid #aeaeae;
16 background-color: white;
17 }
18 .react-datepicker__header {
19 text-align: center;
20 background-color: #f0f0f0;
25 position: relative;
26 }
27 .react-datepicker__current-month {
28 margin-top: 0;
29 color: #000;
31 font-size: 1rem;
32 }
33 .react-datepicker__day-names, .react-datepicker__week {
34 display: flex;
35 justify-content: space-around;
36 }
37 .react-datepicker__day-name, .react-datepicker__day {
38 color: #000;
39 display: inline-block;
43 margin: 0.166rem;
44 }
45 .react-datepicker__day:hover {
46 background-color: #f0f0f0;
47 }
48 .react-datepicker__day--selected {
49 background-color: #216ba5;
50 color: #fff;
51 }
52 .react-datepicker__day--today {
53 font-weight: bold;
54 }
55 .react-datepicker__navigation {
56 display: none;
57 }
1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import DatePicker from "https://esm.sh/react-datepicker";
5import { createRoot } from "https://esm.sh/react-dom/client";
6import Stripe from "https://esm.sh/stripe";
7
8const datePickerStyles = `
9 .react-datepicker {
10 font-family: Arial, sans-serif;
11 border: 1px solid #aeaeae;
16 background-color: white;
17 }
18 .react-datepicker__header {
19 text-align: center;
20 background-color: #f0f0f0;
25 position: relative;
26 }
27 .react-datepicker__current-month {
28 margin-top: 0;
29 color: #000;
31 font-size: 1rem;
32 }
33 .react-datepicker__day-names, .react-datepicker__week {
34 display: flex;
35 justify-content: space-around;
36 }
37 .react-datepicker__day-name, .react-datepicker__day {
38 color: #000;
39 display: inline-block;
43 margin: 0.166rem;
44 }
45 .react-datepicker__day:hover {
46 background-color: #f0f0f0;
47 }
48 .react-datepicker__day--selected {
49 background-color: #216ba5;
50 color: #fff;
51 }
52 .react-datepicker__day--today {
53 font-weight: bold;
54 }
55 .react-datepicker__navigation {
56 display: none;
57 }
