1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
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
5function App() {
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2
3import { useQuery } from "https://esm.sh/@tanstack/react-query@5.74.7?deps=react@19.0.0";
4import { client } from "../../hono.ts";
5import { Skeleton } from "../Loading.tsx";
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2import { createRoot } from "https://esm.sh/react-dom@19.0.0/client";
3import { BrowserRouter } from "https://esm.sh/react-router-dom@7.4.1?deps=react@19.0.0,react-dom@19.0.0";
4import { App } from "./components/App.tsx";
5import { QueryClientProvider } from "https://esm.sh/@tanstack/react-query@5.74.7?deps=react@19.0.0";
6import { queryClient } from "./hono.ts";
7
1import { useCallback, useEffect, useState } from "https://esm.sh/react@19.0.0";
2import { User } from "../../backend/db/schemas_http.ts";
3import { client } from "../hono.ts";
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2import { useState } from "https://esm.sh/react@19.0.0";
3import { useLocation } from "https://esm.sh/react-router-dom@7.4.1?deps=react@19.0.0,react-dom@19.0.0";
4import { useAuth } from "../hooks/useAuth.ts";
5
14 const from = location.state?.from?.pathname || "/";
15
16 const handleRequestMagicLink = async (e: React.FormEvent) => {
17 e.preventDefault();
18 setErrorMessage(null);
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2
3import { useEffect, useState } from "https://esm.sh/react@19.0.0";
4import { useAuth } from "../hooks/useAuth.ts";
5import { Wand } from "../components/Wands/Wand.tsx";
6
7const ProfileField = (
8 { label, value }: { label: string; value: React.ReactNode },
9) => (
10 <div className="flex border-b border-gray-200 pb-2">
24 label: string;
25 value: string;
26 onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
27 disabled: boolean;
28}) => (
74 }
75
76 const handleSubmit = async (e: React.FormEvent) => {
77 e.preventDefault();
78 setIsSubmitting(true);
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2
3import { Link as RouterLink } from "https://esm.sh/react-router-dom@7.4.1?deps=react@19.0.0,react-dom@19.0.0";
4
5interface LinkProps {
6 to: string;
7 children: React.ReactNode;
8 className?: string;
9}
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2import { useCallback, useRef, useState } from "https://esm.sh/react@19.0.0";
3import { convertToBase64 } from "../../../utils.ts";
4import Webcam from "https://esm.sh/react-webcam@7.2.0?deps=react@19.0.0";
5import { isMobile } from "https://esm.sh/react-device-detect@2.2.3";
6
7export interface ImageUploaderProps {
15 const webcamRef = useRef<Webcam>(null);
16
17 const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
18 setError(null);
19 const file = e.target.files?.[0];
58 }, [webcamRef, onImageSelected]);
59
60 // Set video constraints based on device type using react-device-detect
61 const videoConstraints = {
62 width: 480,
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2import { useReactMediaRecorder } from "https://esm.sh/react-media-recorder@1.7.1?deps=react@19.0.0,react-dom@19.0.0";
3import { useEffect, useState } from "https://esm.sh/react@19.0.0";
4import { convertToBase64 } from "../../../utils.ts";
5
10export function AudioRecorder({ onRecordingComplete }: AudioRecorderProps) {
11 const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } =
12 useReactMediaRecorder({ audio: true });
13 const [audioBase64, setAudioBase64] = useState<string | null>(null);
14 const [error, setError] = useState<string | null>(null);
43 };
44
45 const handleAudioUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
46 setError(null);
47 const file = e.target.files?.[0];
