From 2d78f719ff1c3992ccc985286bad1fb69511543a Mon Sep 17 00:00:00 2001 From: bagas Date: Sat, 3 Jan 2026 14:44:47 +0700 Subject: [PATCH] refactor: reuse header and footer --- app/dashboard/page.tsx | 356 +---------- app/page.tsx | 1133 +----------------------------------- app/settings/page.tsx | 806 +------------------------ components/site-footer.tsx | 35 ++ components/site-header.tsx | 109 ++++ components/tunnl-logo.tsx | 521 +++++++++++++++++ 6 files changed, 680 insertions(+), 2280 deletions(-) create mode 100644 components/site-footer.tsx create mode 100644 components/site-header.tsx create mode 100644 components/tunnl-logo.tsx diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index d9e12b4..a89a1d0 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -3,8 +3,9 @@ import { useEffect, useState } from "react" import Link from "next/link" import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config" -import UserMenu from "@/components/user-menu" import { authClient } from "@/lib/auth-client" +import SiteHeader from "@/components/site-header" +import SiteFooter from "@/components/site-footer" const defaultConfig: TunnelConfigType = { type: "http", @@ -77,15 +78,6 @@ export default function DashboardPage() { fetchSession() }, []) - const handleSignOut = async () => { - try { - await authClient.signOut() - setSession(null) - } catch (error) { - console.error("Error signing out", error) - } - } - const stopConnection = (id: string) => { setActiveConnections((prev) => prev.filter((conn) => conn.id !== id)) setStatusMessage("Connection stopped") @@ -93,202 +85,7 @@ export default function DashboardPage() { return (
-
-
-
-
- - - - - - - - - - - - - - - - - - tunnl.live - -
- -
- {session?.user ? ( - - ) : ( - <> - - - - - - - Sign In - - -
- - - - - - Sign in to save configurations & view history -
- - )} -
-
-
-
+
@@ -406,152 +203,7 @@ export default function DashboardPage() {
-
-
-
- - - - - - - - - - - - - - - - - tunnl.live -
-
- © {new Date().getFullYear()} tunnl.live. Made with ❤️ by{" "} - - Bagas - . All rights reserved. -
-
-
+
) } diff --git a/app/page.tsx b/app/page.tsx index 17cccb4..6784352 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,11 @@ "use client" -import { useEffect, useState } from "react" +import { useState } from "react" import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config" -import Link from "next/link" -import { authClient } from "@/lib/auth-client"; -import UserMenu from "@/components/user-menu" -import { redirect, RedirectType } from 'next/navigation' +import SiteHeader from "@/components/site-header" +import SiteFooter from "@/components/site-footer" +import { authClient } from "@/lib/auth-client" +import { useEffect } from "react" const defaultConfig: TunnelConfigType = { type: "http", @@ -33,595 +33,9 @@ export default function Home() { fetchData(); }, []); - - const logout = async() => { - await authClient.signOut({ - fetchOptions: { - onSuccess: () => { - redirect('/login', RedirectType.replace) - } - } - }) - } - return (
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - tunnl.live - -
- -
- {logedin != null ? ( - - ) : ( - <> - - - - - - - Sign In - - -
- - - - - - Sign in to save configurations & view history -
- - )} -
-
-
-
+
@@ -725,540 +139,7 @@ export default function Home() {
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - tunnl.live -
-
- © {new Date().getFullYear()} tunnl.live. Made with ❤️ by{' '} - - Bagas - . All rights reserved. -
- -
-
+
) } diff --git a/app/settings/page.tsx b/app/settings/page.tsx index 58039ff..98c2754 100644 --- a/app/settings/page.tsx +++ b/app/settings/page.tsx @@ -1,9 +1,9 @@ "use client" import { useEffect, useState } from "react" -import Link from "next/link" -import UserMenu from "@/components/user-menu" import { authClient } from "@/lib/auth-client" +import SiteHeader from "@/components/site-header" +import SiteFooter from "@/components/site-footer" export default function SettingsPage() { type SessionResponse = Awaited> @@ -34,434 +34,7 @@ export default function SettingsPage() { return (
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - tunnl.live - -
- -
- {session?.user ? ( - { - try { - await authClient.signOut() - setSession(null) - } catch (error) { - console.error("Error signing out", error) - } - }} - /> - ) : ( - <> - - - - - - - Sign In - - -
- - - - - - Sign in to save configurations & view history -
- - )} -
-
-
-
+
@@ -505,378 +78,7 @@ export default function SettingsPage() {
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - tunnl.live -
-
- © {new Date().getFullYear()} tunnl.live. Made with ❤️ by{' '} - - Bagas - . All rights reserved. -
- -
-
+ ) } diff --git a/components/site-footer.tsx b/components/site-footer.tsx new file mode 100644 index 0000000..87c71d8 --- /dev/null +++ b/components/site-footer.tsx @@ -0,0 +1,35 @@ +"use client" + +import TunnlLogo from "./tunnl-logo" +import Link from "next/link" + +export default function SiteFooter() { + return ( +
+
+
+ + + tunnl.live + +
+
+ + Status Page + +
+
+ © {new Date().getFullYear()} tunnl.live. Made with ❤️ by{' '} + + Bagas + . All rights reserved. +
+
+
+ ) +} diff --git a/components/site-header.tsx b/components/site-header.tsx new file mode 100644 index 0000000..b7dd32b --- /dev/null +++ b/components/site-header.tsx @@ -0,0 +1,109 @@ +"use client" + +import Link from "next/link" +import TunnlLogo from "./tunnl-logo" +import UserMenu from "./user-menu" +import { useEffect, useState } from "react" +import { authClient } from "@/lib/auth-client"; +import { redirect, RedirectType } from 'next/navigation' + +export default function SiteHeader() { + type SessionData = Awaited>; + const [logedin, setLogedin] = useState(null) + + useEffect(() => { + const fetchData = async () => { + try { + const result = await authClient.getSession() + if (result.data != null) { + setLogedin(result.data.user); + } + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + fetchData(); + }, []); + + const logout = async () => { + await authClient.signOut({ + fetchOptions: { + onSuccess: () => { + redirect('/login', RedirectType.replace) + } + } + }) + } + return ( +
+
+
+
+ + + tunnl.live + +
+ +
+ {logedin ? ( + + ) : ( + <> + + + + + + + Sign In + + +
+ + + + + + Sign in to save configurations & view history +
+ + )} +
+
+
+
+ ) +} diff --git a/components/tunnl-logo.tsx b/components/tunnl-logo.tsx new file mode 100644 index 0000000..ae39b77 --- /dev/null +++ b/components/tunnl-logo.tsx @@ -0,0 +1,521 @@ +"use client" + +export default function TunnlLogo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +}