style: fake ts tooltips

packages/example-nextjs14/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.28",
     "@next/third-parties": "^15.0.2",
     "@shikijs/transformers": "^1.12.1",
     "@vercel/analytics": "^1.3.1",

packages/example-nextjs14/src/app/components/CodeBlockState.tsx → packages/example-nextjs14/src/app/(demo)/CodeBlockState.tsx

@@ -1,4 +1,4 @@
-import { File } from './File';
+import { File } from '../components/File';
 
 export const CodeBlockState = () => {
   return (

packages/example-nextjs14/src/app/components/CodeBlocksNext.tsx → packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx

@@ -1,5 +1,8 @@
-import { File } from './File';
+'use client';
+
+import { File } from '../components/File';
 import { CodeBlockState } from './CodeBlockState';
+import { tooltips } from './tooltips';
 
 export const CodeBlocks = () => {
   return (
@@ -15,6 +18,7 @@ export const CodeBlocks = () => {
       </div>
       <File
         name="ComponentA"
+        matchers={tooltips}
         content={`'use client';
 
 import { useUrlState } from 'state-in-url/next';// [!code highlight:1]
@@ -53,12 +57,14 @@ export const ComponentB = ({ searchParams }: { searchParams?: object }) => {
 // [!code word:urlState]
   return <div>name: {urlState.name}</div>
 };`}
+        matchers={tooltips}
       />
       <div className="codeTitle">
         3. Can create self-sufficient hook to manage slice of some state.
       </div>
       <File
         name="useFormState - custom hook"
+        matchers={tooltips}
         content={`'use client';
 
 import React from 'react';
@@ -97,7 +103,7 @@ export const useFormState = ({ searchParams }: { searchParams?: object }) => {//
   }, [setUrlBase]);
 
   return { urlState, setUrl, resetUrl: reset };
-};`}/>
+};`} />
     </div>
   );
 };

packages/example-nextjs14/src/app/(demo)/page.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 
 import { DemoPart } from '../DemoPart';
 import { Description } from '../components/Description';
+import { Tabs } from '../components/Tabs';
 
 const CodeBlocks = dynamicImport(
-  () => import('../components/CodeBlocksNext')
+  () => import('./CodeBlocksNext')
     .then((mod) => mod.CodeBlocks),
   {
     loading: () => <div className="codeBlock-wrapper codeBlock-loader"></div>,
@@ -16,9 +17,10 @@ export default async function Home({ searchParams }: { searchParams: object }) {
   return (
     <>
       <DemoPart searchParams={searchParams} />
+
+      <Tabs className="sticky top-1 mt-12" />
+
       <section className="codeBlock-wrapper">
-        {/* TODO:Shiki is a little shitty https://github.com/vercel/next.js/issues/64434
-         try https://codehike.org/docs/code/twoslash */}
         <CodeBlocks />
       </section>
 

packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx → packages/example-nextjs14/src/app/(demo)/react-router/CodeBlocksRR.tsx

@@ -1,5 +1,8 @@
-import { File } from './File';
-import { CodeBlockState } from './CodeBlockState';
+'use client';
+
+import { File } from '../../components/File';
+import { CodeBlockState } from '../CodeBlockState';
+import { tooltips } from '../tooltips';
 
 export const CodeBlocksRR = () => {
   return (
@@ -15,6 +18,7 @@ export const CodeBlocksRR = () => {
       </div>
       <File
         name="ComponentA"
+        matchers={tooltips}
         content={`import { useUrlState } from 'state-in-url/react-router';// [!code highlight:1]
 import { form } from './form';
 
@@ -39,6 +43,7 @@ export const ComponentA = () => {
       />
       <File
         name="ComponentB"
+        matchers={tooltips}
         content={`import { useUrlState } from 'state-in-url/react-router';// [!code highlight:1]
 import { form } from './form';
 
@@ -55,6 +60,7 @@ export const ComponentB = () => {
       </div>
       <File
         name="useFormState - custom hook"
+        matchers={tooltips}
         content={`import React from 'react';
 import { useUrlState } from 'state-in-url/react-router';
 

packages/example-nextjs14/src/app/(demo)/react-router/page.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 
 import { DemoPart } from '../../DemoPart';
 import { Description } from '../../components/Description';
+import { Tabs } from '../../components/Tabs';
 
 const CodeBlocks = dynamicImport(
-  () => import('../../components/CodeBlocksRR').then((mod) => mod.CodeBlocksRR),
+  () => import('./CodeBlocksRR').then((mod) => mod.CodeBlocksRR),
   {
     loading: () => <div className="codeBlock-wrapper codeBlock-loader"></div>,
   },
@@ -16,6 +17,8 @@ export default async function Home({ searchParams }: { searchParams: object }) {
     <>
       <DemoPart searchParams={searchParams}/>
 
+      <Tabs className="sticky top-1 mt-12" />
+
       <section className="codeBlock-wrapper">
         <CodeBlocks />
       </section>

packages/example-nextjs14/src/app/(demo)/template.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import 'shared/styles.css';
 
-import { Tabs } from '../components/Tabs';
 import { Logo } from '../components/Logo';
 
 const Footer = dynamic(
@@ -18,15 +17,15 @@ export default async function Template({
 }) {
   return (
     <main className="page-main">
-      <div className="wrapper">
+      <div className="wrapper relative">
         <header className="header">
           <div className="wrapper">
             <div className="branding">
               <Logo className="logo" />
 
               <div className="text">
                 <h1 className="title">State in url</h1>
-                <p className="subtitle">State management and deep links</p>
+                <p className="subtitle">State management and URL sync</p>
               </div>
             </div>
 
@@ -36,17 +35,10 @@ export default async function Template({
           </div>
         </header>
 
-        <Tabs entries={TABS} className="sticky top-1" />
-
         {children}
       </div>
 
       <Footer />
     </main>
   );
 }
-
-const TABS = [
-  { text: "Next.js", url: '/' },
-  { text: "react-router", url: '/react-router' },
-]