Skip to content

Commit

Permalink
feat(mobile): manage theme toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
bacharif committed Jul 25, 2024
1 parent 63dd6ee commit c1bd506
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 45 deletions.
70 changes: 29 additions & 41 deletions src/app/_components/header.tsx
Original file line number Diff line number Diff line change
@@ -1,46 +1,34 @@
import type { Metadata } from "next";
import { robotoMono } from "@zohal/app/_helpers/fonts";
import { Toaster } from "sonner";
import Header from "./_components/header";
import "./globals.css";
import Providers from "./providers";
import { ThemeProvider } from "./_components/theme-provider";
import { Toast } from "./_ui/toast";
// TODO : See correct usage of Next Image component, Image optimization is not a free feature we actually need to pay for it on Vercel

export const metadata: Metadata = {
description:
"Next-generation Perpetual Exchange on Starknet. Revolutionizing User Experience.",
title: "Zohal",
};
import Link from "next/link";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
import Divider from "../_ui/divider";
import { ConnectButton } from "../zohal-modal";
import Navigation from "./navigation";
import { ThemeToggle } from "./theme-toggle";
import {FaucetButton} from "@zohal/app/ui/FaucetButton"

/* eslint-disable @next/next/no-img-element */
export default function Header() {
return (
<html className={robotoMono.className} lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="lg:overflow-hidden bg-black text-white">
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<div className="flex h-full flex-col min-h-screen">
<Providers>
<Header />
<div className="flex-auto">
{children}
</div>
<Toaster position="bottom-right" />
</Providers>
</div>
</ThemeProvider>
</body>
</html>
<>
<header className="flex flex-initial items-center justify-between p-4">
<div className="flex items-center gap-4">
<Link className="flex-shrink-0" href="/">
<img
alt="Zohal"
className="w-10 rotate-[-35deg] rounded-lg"
src="/logo.png"
/>
</Link>
<Navigation />
</div>
<div className="items-cneter flex gap-2">
<FaucetButton/>
<ConnectButton />
</div>
</header>
<Divider />
</>
);
}
11 changes: 7 additions & 4 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import type { Metadata } from "next";

import { robotoMono } from "@zohal/app/_helpers/fonts";
import { Toaster } from "sonner";

import Header from "./_components/header";
import "./globals.css";
import Providers from "./providers";
Expand All @@ -22,7 +20,10 @@ export default function RootLayout({
}) {
return (
<html className={robotoMono.className} lang="en">
<body className="lg:overflow-hidden">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="lg:overflow-hidden bg-black text-white">
<ThemeProvider
attribute="class"
defaultTheme="dark"
Expand All @@ -32,7 +33,9 @@ export default function RootLayout({
<div className="flex h-full flex-col min-h-screen">
<Providers>
<Header />
{children}
<div className="flex-auto">
{children}
</div>
<Toaster position="bottom-right" />
</Providers>
</div>
Expand Down

0 comments on commit c1bd506

Please sign in to comment.