test

willashe · May 28, 2024 · f1f679d · f1f679d
1 parent 122f6e2
commit f1f679d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/app/(test)/test/layout.tsx b/src/app/(test)/test/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 export default function RootLayout() {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={inter.className} style={{ margin: 0 }}>
         <BgBanner />
       </body>
     </html>

diff --git a/src/components/BgBanner.tsx b/src/components/BgBanner.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-import styles from './testcomponents.module.css';
+// import styles from './testcomponents.module.css';
 
 type BgBannerProps = {
   debug?: boolean;
@@ -13,9 +13,15 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
     x: number;
     y: number;
   } | null>();
-  useLayoutEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // useLayoutEffect(() => {
+  //   const node = ref.current;
+
+  //   if (node) {
+  //     node.style.top = '50svh';
+  //   }
+  // }, []);
 
   useEffect(() => {
     // TODO: debounce
@@ -35,21 +41,19 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
 
   return (
     <>
-      {/* <div
+      <div
+        ref={ref}
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          top: '50svh',
-          transform: 'translateY(50%)',
+          position: 'absolute',
+          top: 'calc(50svh - 200px)',
           height: 400,
           width: '100%',
-          margin: 0,
           background: 'red',
         }}
       >
         test
-      </div> */}
-      <div className={styles['bg-banner']} />
+      </div>
+      {/* <div className={styles['bg-banner']} /> */}
       {debug ? (
         <div>
           {orientation?.x || 0}, {orientation?.y || 0}