-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from solun-pm/dev
Added new transition and loader
- Loading branch information
Showing
10 changed files
with
145 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| "use client"; | ||
|
|
||
| import { Suspense, lazy, useEffect } from "react"; | ||
| import { useRouter } from "next/navigation"; | ||
| import Navigation from "@/components/navigation"; | ||
|
|
||
| const OverviewPage = lazy(() => import("@/pages/subpages/overview")); | ||
| const SettingsPage = lazy(() => import("@/pages/subpages/settings")); | ||
| const AliasesPage = lazy(() => import("@/pages/subpages/aliases")); | ||
|
|
||
| import { Toaster } from "react-hot-toast"; | ||
|
|
||
| import Loader from "@/components/loader"; | ||
|
|
||
| const PageContent = ({ path }: any) => { | ||
| switch (path) { | ||
| case "overview": | ||
| return <OverviewPage />; | ||
| case "settings": | ||
| return <SettingsPage />; | ||
| case "aliases": | ||
| return <AliasesPage />; | ||
| default: | ||
| return <Loader />; | ||
| } | ||
| }; | ||
|
|
||
| const MainPage = ({ params }: { params: { path: string } }) => { | ||
| const router = useRouter(); | ||
|
|
||
| useEffect(() => { | ||
| if (!["overview", "settings", "aliases"].includes(params.path)) { | ||
| router.push("/"); | ||
| } | ||
| }, [params.path, router]); | ||
|
|
||
| return ( | ||
| <div className="flex items-center justify-center min-h-screen p-6 animate-gradient-x"> | ||
| <Toaster position="top-right" /> | ||
| <div className="bg-slate-800 text-white p-5 rounded-lg shadow-md w-full max-w-6xl min-h-[790px]"> | ||
| <Navigation /> | ||
| <Suspense fallback={<Loader />}> | ||
| <PageContent path={params.path} /> | ||
| </Suspense> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MainPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import "../app/globals.css"; | ||
|
|
||
| const Loader = () => { | ||
| const [fadeIn, setFadeIn] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| const timeout = setTimeout(() => setFadeIn(false), 500); | ||
| return () => clearTimeout(timeout); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div | ||
| className={`fixed inset-0 flex text-center items-center justify-center animate-gradient-x"> transition-opacity duration-500 ${ | ||
| fadeIn ? 'opacity-100' : 'opacity-0' | ||
| }`} | ||
| > | ||
| <img | ||
| src="https://cdn.solun.pm/images/logo/solun-logo.png" | ||
| className="animate-pulse w-20 h-20" | ||
| alt="Logo" | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Loader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,69 @@ | ||
| import { useState } from "react"; | ||
| import Link from "next/link"; | ||
| import { useRouter, usePathname } from "next/navigation"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { usePathname } from 'next/navigation' | ||
|
|
||
| const Navigation = () => { | ||
| const router = useRouter(); | ||
| const pathname = usePathname(); | ||
| const pathname = usePathname() | ||
|
|
||
| const handleLogout = () => { | ||
| localStorage.removeItem("jwt"); | ||
| router.push("/login"); | ||
| }; | ||
|
|
||
| const goToOverview = () => { | ||
| router.push("/dashboard"); | ||
| }; | ||
|
|
||
| const goToSettings = () => { | ||
| router.push("/dashboard/settings"); | ||
| }; | ||
|
|
||
| const goToAliases = () => { | ||
| router.push("/dashboard/aliases"); | ||
| }; | ||
|
|
||
| const goToDomains = () => { | ||
| router.push("/dashboard/domains"); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <nav className="flex flex-col md:flex-row md:justify-between items-center md:space-x-4 space-y-2 md:space-y-0 bg-slate-950 p-4 mb-4 rounded-lg shadow-xl"> | ||
| <div className="flex flex-col md:flex-row justify-start md:space-x-4 space-y-2 md:space-y-0 w-full"> | ||
| <button | ||
| onClick={goToOverview} | ||
| <> | ||
| <nav className="flex flex-col md:flex-row md:justify-between items-center md:space-x-4 space-y-2 md:space-y-0 bg-slate-950 p-4 mb-4 rounded-lg shadow-xl"> | ||
| <div className="flex flex-col md:flex-row justify-start md:space-x-4 space-y-2 md:space-y-0 w-full"> | ||
| <Link href="/dash/overview" | ||
| className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${ | ||
| pathname === "/dashboard" ? "bg-blue-500" : "hover:bg-blue-500" | ||
| pathname === "/dash/overview" | ||
| ? "bg-blue-500" | ||
| : "hover:bg-blue-500" | ||
| }`} | ||
| > | ||
| Overview | ||
| </button> | ||
| <button | ||
| onClick={goToSettings} | ||
| </Link> | ||
| <Link href="/dash/settings" | ||
| className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${ | ||
| pathname === "/dashboard/settings" | ||
| pathname === "/dash/settings" | ||
| ? "bg-blue-500" | ||
| : "hover:bg-blue-500" | ||
| }`} | ||
| > | ||
| Settings | ||
| </button> | ||
| <button | ||
| onClick={goToAliases} | ||
| </Link> | ||
| <Link href="/dash/aliases" | ||
| className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${ | ||
| pathname === "/dashboard/aliases" | ||
| pathname === "/dash/aliases" | ||
| ? "bg-blue-500" | ||
| : "hover:bg-blue-500" | ||
| }`} | ||
| > | ||
| Aliases | ||
| </button> | ||
| {/* | ||
| <button | ||
| onClick={goToDomains} | ||
| </Link> | ||
| {/* | ||
| <Link href="/dash/domains" | ||
| className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${ | ||
| pathname === "/dashboard/domains" | ||
| pathname === "/dash/domains" | ||
| ? "bg-blue-500" | ||
| : "hover:bg-blue-500" | ||
| }`} | ||
| > | ||
| Domains | ||
| </button> | ||
| */} | ||
| </div> | ||
| <button | ||
| onClick={handleLogout} | ||
| className="text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center md:text-left hover:bg-blue-500 mt-4 md:mt-0" | ||
| > | ||
| Logout | ||
| </button> | ||
| </nav> | ||
| </> | ||
| </Link> | ||
| */} | ||
| </div> | ||
| <button | ||
| onClick={handleLogout} | ||
| className="text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center md:text-left hover:bg-blue-500 mt-4 md:mt-0" | ||
| > | ||
| Logout | ||
| </button> | ||
| </nav> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Navigation; | ||
| export default Navigation; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters