codegrid
diff --git a/‎7/package-lock.json
Lines changed: 3 additions & 3 deletions b/‎7/package-lock.json
Lines changed: 3 additions & 3 deletions
diff --git a/‎7/src/App.tsx
Lines changed: 34 additions & 20 deletions b/‎7/src/App.tsx
Lines changed: 34 additions & 20 deletions
diff --git a/‎8/.gitignore
Lines changed: 24 additions & 0 deletions b/‎8/.gitignore
Lines changed: 24 additions & 0 deletions
diff --git a/‎8/index.html
Lines changed: 13 additions & 0 deletions b/‎8/index.html
Lines changed: 13 additions & 0 deletions
@@ -1,31 +1,45 @@
-import { Popover } from './Popover'; // Assuming Popover is in the same directory
+import { useState } from 'react';
+import {
+  useFloating,
+  useRole, // 追加
+  useInteractions, // 追加
+} from '@floating-ui/react';
 
 function App() {
 
+  const [ isOpen, setIsOpen ] = useState( false );
+  const { refs, floatingStyles, context } = useFloating( {
+    open: isOpen,
+    onOpenChange: setIsOpen,
+  } );
+
+  const role = useRole( context, { role: 'dialog' } ); // 追加
+
+  const { getReferenceProps, getFloatingProps } = useInteractions( [
+    role,
+  ] );
+
   return (
     <>
-      Basic React App
-      <div style={ { height: 'calc(100vh - 60px)' } }></div>
-
-      <Popover
-        trigger={
-          <button type="button">Click me!</button>
-        }
+      Basic React App<br />
+      <button
+        type="button"
+        ref={ refs.setReference }
+        onClick={ () => setIsOpen( ! isOpen ) }
+        { ...getReferenceProps() } // 追加
       >
-        ポップオーバー内容
-      </Popover>
+        Click Me!
+      </button>
 
-      <div style={ { display: 'flex', justifyContent: 'end' } }>
-        <Popover
-          trigger={
-            <button type="button">Click me, too!</button>
-          }
+      { isOpen && (
+        <div
+          ref={ refs.setFloating }
+          style={ { ...floatingStyles, zIndex: 100, background: '#ccc' } }
+          { ...getFloatingProps() } // 追加
         >
-          右端のポップオーバー内容
-        </Popover>
-      </div>
-
-      <div style={ { height: '100vh' } }></div>
+          Popover
+        </div>
+      ) }
     </>
   );
 }
 
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>