mirror of
https://github.com/andwati/dokploy.git
synced 2026-10-21 20:44:29 +00:00
google-labs-jules[bot]
e4aefe7f9d
This commit introduces a top-loading progress bar that provides visual feedback during page transitions, improving the user's navigation experience. - **Package Integration:** The `nextjs-toploader` package has been added to provide a lightweight and efficient progress bar solution for Next.js. - **Theme-Aware Color:** The progress bar's color is dynamically set using the `hsl(var(--sidebar-ring))` CSS variable, ensuring it automatically adapts to the application's current theme (light or dark mode). - **Implementation:** The `NextTopLoader` component is integrated into the main `_app.tsx` file, making it active across the entire application.
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import "@/styles/globals.css";
|
|
|
|
import type { NextPage } from "next";
|
|
import type { AppProps } from "next/app";
|
|
import { Inter } from "next/font/google";
|
|
import Head from "next/head";
|
|
import Script from "next/script";
|
|
import { appWithTranslation } from "next-i18next";
|
|
import { ThemeProvider } from "next-themes";
|
|
import NextTopLoader from "nextjs-toploader";
|
|
import type { ReactElement, ReactNode } from "react";
|
|
import { SearchCommand } from "@/components/dashboard/search-command";
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
import { Languages } from "@/lib/languages";
|
|
import { api } from "@/utils/api";
|
|
|
|
const inter = Inter({ subsets: ["latin"] });
|
|
|
|
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
|
|
getLayout?: (page: ReactElement) => ReactNode;
|
|
theme?: string;
|
|
};
|
|
|
|
type AppPropsWithLayout = AppProps & {
|
|
Component: NextPageWithLayout;
|
|
};
|
|
|
|
const MyApp = ({
|
|
Component,
|
|
pageProps: { ...pageProps },
|
|
}: AppPropsWithLayout) => {
|
|
const getLayout = Component.getLayout ?? ((page) => page);
|
|
|
|
return (
|
|
<>
|
|
<style jsx global>
|
|
{`
|
|
:root {
|
|
--font-inter: ${inter.style.fontFamily};
|
|
}
|
|
`}
|
|
</style>
|
|
<Head>
|
|
<title>Dokploy</title>
|
|
</Head>
|
|
{process.env.NEXT_PUBLIC_UMAMI_HOST &&
|
|
process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
|
|
<Script
|
|
src={process.env.NEXT_PUBLIC_UMAMI_HOST}
|
|
data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
|
|
/>
|
|
)}
|
|
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="system"
|
|
enableSystem
|
|
disableTransitionOnChange
|
|
forcedTheme={Component.theme}
|
|
>
|
|
<NextTopLoader color="hsl(var(--sidebar-ring))" />
|
|
<Toaster richColors />
|
|
<SearchCommand />
|
|
{getLayout(<Component {...pageProps} />)}
|
|
</ThemeProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default api.withTRPC(
|
|
appWithTranslation(MyApp, {
|
|
i18n: {
|
|
defaultLocale: "en",
|
|
locales: Object.values(Languages).map((language) => language.code),
|
|
localeDetection: false,
|
|
},
|
|
fallbackLng: "en",
|
|
keySeparator: false,
|
|
}),
|
|
);
|