From ae1c7dd70c9501dc4a9be001906a55d72a92db35 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Thu, 16 May 2024 03:44:17 +0330 Subject: [PATCH] basic style & add mui and aos & banner style --- app/component/ThemeRegistry.js | 60 ++++++++++++++++++++++++++ app/globals.css | 38 ++++++++++++---- app/layout.js | 6 ++- app/page.js | 40 +++++------------ app/theme/theme.js | 39 +++++++++++++++++ components/home/index.js | 29 ++++++++++++- components/layout/Header.js | 62 ++++++++++++++------------- components/layout/index.js | 2 +- package-lock.json | 62 +++++++++++++++++++++++++++ package.json | 3 ++ public/assets/images/banner-home.png | Bin 0 -> 1645410 bytes 11 files changed, 270 insertions(+), 71 deletions(-) create mode 100644 app/component/ThemeRegistry.js create mode 100644 app/theme/theme.js create mode 100644 public/assets/images/banner-home.png diff --git a/app/component/ThemeRegistry.js b/app/component/ThemeRegistry.js new file mode 100644 index 0000000..fa93bb0 --- /dev/null +++ b/app/component/ThemeRegistry.js @@ -0,0 +1,60 @@ +// app/ThemeRegistry.tsx +'use client'; +import createCache from '@emotion/cache'; +import { useServerInsertedHTML } from 'next/navigation'; +import { CacheProvider, ThemeProvider } from '@emotion/react'; +import React from 'react'; +import theme from '../theme/theme'; + +// This implementation is from emotion-js +// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902 +export default function ThemeRegistry({ + children +}) { + const options = {key: 'mui'} + const [{ cache, flush }] = React.useState(() => { + const cache = createCache(options); + cache.compat = true; + const prevInsert = cache.insert; + let inserted = []; + cache.insert = (...args) => { + const serialized = args[1]; + if (cache.inserted[serialized.name] === undefined) { + inserted.push(serialized.name); + } + return prevInsert(...args); + }; + const flush = () => { + const prevInserted = inserted; + inserted = []; + return prevInserted; + }; + return { cache, flush }; + }); + + useServerInsertedHTML(() => { + const names = flush(); + if (names.length === 0) { + return null; + } + let styles = ''; + for (const name of names) { + styles += cache.inserted[name]; + } + return ( +