test

willashe · May 28, 2024 · 7e90146 · 7e90146
1 parent 395c6dc
commit 7e90146
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/src/app/(test)/test/layout.tsx b/src/app/(test)/test/layout.tsx
@@ -1,3 +1,4 @@
+import BgBanner from '@/components/BgBanner';
 import type { Metadata } from 'next';
 import { Assistant } from 'next/font/google';
 
@@ -11,24 +12,8 @@ export const metadata: Metadata = {
 export default function RootLayout() {
   return (
     <html lang="en">
-      <body
-        className={inter.className}
-        style={{
-          display: 'flex',
-          margin: 0,
-          alignItems: 'center',
-          height: '100vh',
-        }}
-      >
-        <div
-          style={{
-            height: 400,
-            width: '100%',
-            background: 'red',
-          }}
-        >
-          test
-        </div>
+      <body className={inter.className}>
+        <BgBanner />
       </body>
     </html>
   );

diff --git a/src/components/BgBanner.tsx b/src/components/BgBanner.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, 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,6 +13,15 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
     x: number;
     y: number;
   } | null>();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+
+    if (node) {
+      node.style.top = '50svh';
+    }
+  }, []);
 
   useEffect(() => {
     // TODO: debounce
@@ -32,7 +41,22 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
 
   return (
     <>
-      <div className={styles['bg-banner']} />
+      <div
+        ref={ref}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          top: '50svh',
+          transform: 'translateY(50%)',
+          height: 400,
+          width: '100%',
+          margin: 0,
+          background: 'red',
+        }}
+      >
+        test
+      </div>
+      {/* <div className={styles['bg-banner']} /> */}
       {debug ? (
         <div>
           {orientation?.x || 0}, {orientation?.y || 0}