Basic code editor

2024-06-19 23:36:48 +02:00
parent 21c4a4c582
commit 055176d83b
6 changed files with 99 additions and 97 deletions
@@ -1,25 +1,59 @@
-import { Work_Sans } from 'next/font/google'
-import './globals.css'
-import Navigation from '@/components/navigation';
-import Footer from '@/components/footer';
+"use client";
+import { useState, useEffect } from "react"
+import Navigation from "../components/navigation"
+import Footer from "../components/footer"
+import "./globals.css"

-const work_sans = Work_Sans({
-    subsets: ['latin'],
-    display: 'swap',
-    variable: '--font-work_sans',
-})
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    const [showButton, setShowButton] = useState(false)
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowButton(true)
+            } else {
+                setShowButton(false)
+            }
+        }
+
+        window.addEventListener("scroll", handleScroll)
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll)
+        }
+    }, [])
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        })
+    }

-// @ts-ignore
-export default function Layout({ children }) {
    return (
        <html lang="en">
-
-            <body className={work_sans.variable}>
-            <Navigation/>
+        <head>
+            <style jsx global>{`
+                    html {
+                        scroll-behavior: smooth;
+                    }
+                `}</style>
+        </head>
+        <body className="flex flex-col min-h-[100dvh] scroll-smooth">
+        <Navigation />
+        <main className="flex-1">
            {children}
-            <Footer/>
-            </body>
-
+        </main>
+        {showButton && (
+            <button
+                onClick={scrollToTop}
+                className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
+            >
+                ↑ Top
+            </button>
+        )}
+        <Footer />
+        </body>
        </html>
    )
 }