1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import type { RoadmapNode } from "../../shared/types.ts";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useCallback } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import RoadmapCanvas from "./RoadmapCanvas.tsx";
4import Toolbar from "./Toolbar.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0";
4import App from "./components/App.tsx";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { DemoData, isApiError, isNotionPage } from "../index.tsx";
4import { ChessEmbedIframe } from "./chess.tsx";
47 // current hash for nav styling
48 const currentHash = useCurrentHash();
49 // a little light logging so we can see that React is connecting the /frontend and the /backend
50 console.log("Current path:", location.pathname);
51 console.log("Demo data:", demoData);
515 };
516
517 // this last return puts the page elements from renderDemoData into a div, which React likes
518 return (
519 <div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import LoginForm from "./components/LoginForm.tsx";
5import Dashboard from "./components/Dashboard.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import type { User } from "../../shared/types.ts";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { LoginRequest, LoginResponse } from "../../shared/types.ts";
4
13 const [error, setError] = useState("");
14
15 const handleSubmit = async (e: React.FormEvent) => {
16 e.preventDefault();
17 setIsLoading(true);
1# Footer Component Implementation
2
3This project contains a pixel-perfect implementation of a footer design using React and TailwindCSS.
4
5## Files Structure
7- `main.tsx` - HTTP server using Hono to serve the application
8- `index.html` - Main HTML template with TailwindCSS setup
9- `index.tsx` - React application entry point with demo content
10- `footer.tsx` - The main footer component implementation
11
52## Usage
53
54The footer component can be imported and used in any React application:
55
56```tsx
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import React from 'react';
4import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
5import Footer from './footer.tsx';
6
7const App: React.FC = () => {
8 return (
9 <div className="min-h-screen bg-gray-100">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import React from 'react';
4
5const Footer: React.FC = () => {
6 return (
7 <footer className="bg-slate-800 text-white py-16 px-8">
