witel/base-front-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier

Browse Source
This commit is contained in:
AminGhasempoor
2026-04-15 11:28:33 +03:30
parent e37f76ca5a
commit d163d2c23f
12 changed files with 267 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/layout.tsx
View File

@@ -1,38 +1,34 @@
import { ClientAppProvider } from '@/providers/ClientAppProvider'
import '@/styles/globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Theater of dreams',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<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>
)
}
import { ClientAppProvider } from "@/providers/ClientAppProvider";
import "@/styles/globals.css";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Theater of dreams",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<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>
);
}

22
src/app/page.tsx
View File

@@ -1,11 +1,11 @@
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>
)
}
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>
);
}

56
src/components/UI/ThemeToggle.tsx
View File

@@ -1,30 +1,26 @@
'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>
)
}
"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>
);
}

84
src/providers/ClientAppProvider.tsx
View File

@@ -1,44 +1,40 @@
'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>
)
}
"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>
);
}

86
src/styles/globals.css
View File

@@ -1,43 +1,43 @@
@import 'tailwindcss';
*,
*::before,
*::after,
*::-webkit-scrollbar {
box-sizing: border-box;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
*::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
}
@theme {
--color-primary: #cbd5e1;
--color-text: #273343;
/* constants */
--color-neo-aqua: #16a795;
--color-core-red: #ef4444;
--color-warning: #eedd55;
--color-information: #0ea5e9;
--color-error: #ef4444;
--color-success: #22c55e;
}
[data-theme='dark'] {
--color-primary: #273343;
--color-text: #cbd5e1;
}
@import "tailwindcss";
*,
*::before,
*::after,
*::-webkit-scrollbar {
box-sizing: border-box;
}
* {
-ms-overflow-style: none;
scrollbar-width: none;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
*::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
}
@theme {
--color-primary: #cbd5e1;
--color-text: #273343;
/* constants */
--color-neo-aqua: #16a795;
--color-core-red: #ef4444;
--color-warning: #eedd55;
--color-information: #0ea5e9;
--color-error: #ef4444;
--color-success: #22c55e;
}
[data-theme="dark"] {
--color-primary: #273343;
--color-text: #cbd5e1;
}