1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { CreateProjectModal } from "./CreateProject.tsx";
4// Component for the loading spinner
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3
4export function CreateProjectModal({
20 if (!isOpen) return null;
21
22 const handleSubmit = async (e: React.FormEvent) => {
23 e.preventDefault();
24
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import type { BlogPost } from "../utils/types.ts";
4import Footer from "./Footer.tsx";
10interface LayoutProps {
11 title: string;
12 children: React.ReactNode;
13 post?: BlogPost;
14}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const NO_PHRASES = [
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const NO_PHRASES = [
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const NO_PHRASES = [
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React from "https://esm.sh/react@18.2.0";
3import { Link, useLocation } from "https://esm.sh/react-router-dom@7.0.0?deps=react@18.2.0";
4
5const NotFoundPage = () => {
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React from "https://esm.sh/react@18.2.0";
3import { useParams, Link } from "https://esm.sh/react-router-dom@7.0.0?deps=react@18.2.0";
4
5// Mock user data
12 role: "Administrator",
13 joinDate: "January 15, 2023",
14 bio: "Full-stack developer with a passion for React and TypeScript."
15 },
16 "2": {
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React from "https://esm.sh/react@18.2.0";
3
4const AboutPage = () => {
8
9 <div className="bg-white shadow-md rounded-lg p-6 mb-6">
10 <h2 className="text-xl font-semibold mb-4">React Router 7 Demo</h2>
11 <p className="mb-4">
12 This is a demonstration project showcasing the features and capabilities of React Router 7
13 running on Val Town. The project is built with:
14 </p>
15 <ul className="list-disc pl-5 space-y-2 mb-4">
16 <li>React 18.2.0</li>
17 <li>React Router 7.0.0</li>
18 <li>Tailwind CSS for styling</li>
19 <li>Hono backend server</li>
21 <p>
22 The purpose of this demo is to illustrate how to implement client-side routing in a modern
23 React application using the latest version of React Router.
24 </p>
25 </div>
26
27 <div className="bg-white shadow-md rounded-lg p-6">
28 <h2 className="text-xl font-semibold mb-4">Key Features of React Router 7</h2>
29 <div className="space-y-4">
30 <div>
31 <h3 className="font-medium">Data Loading</h3>
32 <p className="text-gray-700">
33 React Router 7 provides improved data loading capabilities with loader functions.
34 </p>
35 </div>
