1/** @jsxImportSource https://esm.sh/react */
2// import { faCoffee } from "npm:@fortawesome/free-solid-svg-icons";
3import {
9 faXTwitter,
10} from "npm:@fortawesome/free-brands-svg-icons";
11import { FontAwesomeIcon } from "npm:@fortawesome/react-fontawesome";
12import { renderToString } from "npm:react-dom/server";
13
14export default async function(req: Request) {
1A simple Slack chat bot prototype able to reply to mentions, channel messages containing keywords, add reactions and act on the slash commands.
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const CANVAS_SIZE = 400;
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 { vtTokenSessionAuth } from "https://esm.town/v/stevekrouse/vtTokenSessionAuthSafe";
5
1/** @jsxImportSource https://esm.sh/react */
2import { Dispatch } from "https://esm.sh/react";
3
4export default function Home(
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.
7
8Migrated from folder: whoIsHiring/whoIsHiring
1// This approach will create a personal card using React and Lucide React icons.
2// We'll use ESM imports for React and Lucide icons.
3// The card will be responsive and styled using Tailwind CSS classes.
4
5/** @jsxImportSource https://esm.sh/react */
6import React from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";
9
10function PersonalCard() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const CANVAS_SIZE = 400;
1// This val creates a Flappy Bird game with a slot machine feature that randomly activates
2// and adds new features throughout the game. It uses React for rendering the UI and
3// manages game state on the client-side. The game logic is implemented using
4// requestAnimationFrame for smooth animation.
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useEffect, useRef } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10const GAME_WIDTH = 400;
279 <Bird y={birdY} invincible={activeFeatures.invincibility} />
280 {pipes.map((pipe, index) => (
281 <React.Fragment key={index}>
282 <Pipe x={pipe.x} height={pipe.height} isTop={true} isGhost={pipe.isGhost} />
283 <Pipe x={pipe.x} height={GAME_HEIGHT - pipe.height - PIPE_GAP} isTop={false} isGhost={pipe.isGhost} />
284 </React.Fragment>
285 ))}
286 <div style={{ position: 'absolute', top: '10px', left: '10px', fontSize: '24px' }}>
1// This approach will fetch weather data from a Wunderground API, parse the JSON response,
2// and display a simplified version of the current conditions in separate tiles. We'll use
3// the fetch API to make the HTTP request and React for rendering the UI.
4
5/** @jsxImportSource https://esm.sh/react */
6import React, { useEffect, useState } from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9function calculateDensityAltitude(elevation, temperature, pressure) {
