Merge pull request 'implemented theme management' (#3) from feature/theme_management into develop
Reviewed-on: witel-flix/frontend#3
This commit is contained in:
@@ -17,6 +17,7 @@
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"framer-motion": "^12.38.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lucide-react": "^1.8.0",
|
||||
"next": "16.1.6",
|
||||
"next-intl": "^4.9.1",
|
||||
"next-pwa": "^5.6.0",
|
||||
|
||||
@@ -1,19 +1,38 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
import { ClientAppProvider } from '@/providers/ClientAppProvider'
|
||||
import '@/styles/globals.css'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Offline App",
|
||||
};
|
||||
title: 'Theater of dreams',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
<html lang='en' suppressHydrationWarning>
|
||||
<head>
|
||||
{/* Prevent theme flicker before hydration */}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
const stored = localStorage.getItem('theme');
|
||||
const theme = stored || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
} catch (e) {}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body className='bg-primary'>
|
||||
<ClientAppProvider>{children}</ClientAppProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import ThemeToggle from '@/components/UI/ThemeToggle'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<ThemeToggle />
|
||||
<h1>Offline Next.js Template 🚀</h1>
|
||||
<p>This project was generated completely offline.</p>
|
||||
</main>
|
||||
|
||||
30
src/components/UI/ThemeToggle.tsx
Normal file
30
src/components/UI/ThemeToggle.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Moon, Sun } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
className='flex cursor-pointer items-center py-2'
|
||||
>
|
||||
<motion.div
|
||||
key={theme}
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<Moon className='text-text size-6' />
|
||||
) : (
|
||||
<Sun className='text-text size-6' />
|
||||
)}
|
||||
</motion.div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
44
src/providers/ClientAppProvider.tsx
Normal file
44
src/providers/ClientAppProvider.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export function ClientAppProvider({ children }: { children: React.ReactNode }) {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
// wait for hydration
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute='data-theme'
|
||||
defaultTheme='dark'
|
||||
enableSystem={false}
|
||||
>
|
||||
<AnimatePresence mode='wait'>
|
||||
{!mounted ? (
|
||||
<motion.div
|
||||
key='splash'
|
||||
className='bg-map-bg flex h-dvh w-dvw items-center justify-center'
|
||||
initial={{ opacity: 1 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
/>
|
||||
) : (
|
||||
<motion.div
|
||||
key='app'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3, ease: 'easeOut' }}
|
||||
className='bg-map-bg'
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
@@ -10,6 +10,10 @@
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
@@ -1,11 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
@@ -23,12 +19,8 @@
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
],
|
||||
"&/*": [
|
||||
"./public/*"
|
||||
]
|
||||
"@/*": ["./src/*"],
|
||||
"&/*": ["./public/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
@@ -38,7 +30,5 @@
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user