'use client'; import { useState, useEffect, useRef, useCallback } from 'react'; import hljs from 'highlight.js/lib/core'; import xml from 'highlight.js/lib/languages/xml'; import javascript from 'highlight.js/lib/languages/javascript'; import typescript from 'highlight.js/lib/languages/typescript'; import bash from 'highlight.js/lib/languages/bash'; import 'highlight.js/styles/github-dark.css'; hljs.registerLanguage('xml', xml); hljs.registerLanguage('javascript', javascript); hljs.registerLanguage('typescript', typescript); hljs.registerLanguage('bash', bash); const COPY_FEEDBACK_DURATION_MS = 2000; const InlineCode = ({ children }: { children: React.ReactNode }) => ( {children} ); interface InstallTab { id: string; label: string; description: React.ReactNode; lang: string; code: string; } const INSTALL_TABS: InstallTab[] = [ { id: 'cli', label: 'CLI', description: '', lang: 'bash', code: `npx -y react-scan@latest init`, }, { id: 'script', label: 'Script Tag', description: <>Paste this before any scripts in your index.html, lang: 'xml', code: ` `, }, { id: 'nextjs-app', label: 'Next.js (App)', description: <>Add this inside of your app/layout.tsx, lang: 'typescript', code: `import Script from "next/script"; export default function RootLayout({ children }) { return (
`, }, { id: 'remix', label: 'Remix', description: <>Add this inside your app/root.tsx, lang: 'typescript', code: `import { Links, Meta, Outlet, Scripts } from "@remix-run/react"; export default function App() { return (