Skip to content

Commit f95d775

Browse files
sabat-12067sabat-12067
committed
Theme: slice, change functionality add
1 parent 97a2145 commit f95d775

File tree

12 files changed

+170
-24
lines changed

12 files changed

+170
-24
lines changed

‎src/components/navBar.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react'
2+
import { useAppDispatch } from '../redux/hook'
3+
import { changeTheme } from '../redux/reducers/themeSlice'
4+
import { THEME } from '../lib/enums'
5+
import Link from 'next/link'
6+
7+
const NavBar = () => {
8+
const dispatch = useAppDispatch()
9+
10+
const handleTheme = (theme: THEME) => {
11+
dispatch(changeTheme(theme))
12+
}
13+
return (
14+
<div className="navbar bg-base-100">
15+
<div className="navbar-start">
16+
<div className="dropdown">
17+
<label tabIndex={0} className="btn btn-ghost lg:hidden">
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
className="h-5 w-5"
21+
fill="none"
22+
viewBox="0 0 24 24"
23+
stroke="currentColor"
24+
>
25+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" />
26+
</svg>
27+
</label>
28+
<ul
29+
tabIndex={0}
30+
className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
31+
>
32+
<li>
33+
<Link className="button" href="/about">
34+
About
35+
</Link>
36+
</li>
37+
<li>
38+
<a>Parent</a>
39+
<ul className="p-2">
40+
<li>
41+
<a>Submenu 1</a>
42+
</li>
43+
<li>
44+
<a>Submenu 2</a>
45+
</li>
46+
</ul>
47+
</li>
48+
<li>
49+
<a>Item 3</a>
50+
</li>
51+
</ul>
52+
</div>
53+
<a className="btn btn-ghost text-xl">Next starter</a>
54+
</div>
55+
<div className="navbar-center hidden lg:flex">
56+
<ul className="menu menu-horizontal px-1">
57+
<li>
58+
<Link className="button" href="/about">
59+
About
60+
</Link>
61+
</li>
62+
<li tabIndex={0}>
63+
<details>
64+
<summary>Parent</summary>
65+
<ul className="p-2">
66+
<li>
67+
<a>Submenu 1</a>
68+
</li>
69+
<li>
70+
<a>Submenu 2</a>
71+
</li>
72+
</ul>
73+
</details>
74+
</li>
75+
<li>
76+
<a>Item 3</a>
77+
</li>
78+
</ul>
79+
</div>
80+
<div className="navbar-end join">
81+
<button className="btn join-item btn-sm btn-primary" onClick={() => handleTheme(THEME.DARK)}>
82+
Dark
83+
</button>
84+
<button className="btn join-item btn-sm btn-neutral" onClick={() => handleTheme(THEME.LIGHT)}>
85+
Light
86+
</button>
87+
<button className="btn join-item btn-sm btn-success" onClick={() => handleTheme(THEME.RETRO)}>
88+
Retro
89+
</button>
90+
</div>
91+
</div>
92+
)
93+
}
94+
95+
export default NavBar

‎src/lib/constants.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,8 @@ export const SIZES = {
1010
MD: 'MD',
1111
LG: 'MD',
1212
} as const
13+
14+
export const THEME = {
15+
LIGHT: 'light',
16+
DARK: 'dark',
17+
} as const

‎src/lib/enums.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum THEME {
2+
LIGHT = 'light',
3+
DARK = 'dark',
4+
RETRO = 'retro',
5+
}

‎src/pages/_app.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import ReduxProvider from '../redux/provider'
22
import '../styles/globals.css'
33
import type { AppProps } from 'next/app'
44
import SwrConfigProvider from '../http/swrConfigProvider'
5+
import ThemeClientWrapper from '../theme/themeClientWrapper'
56

67
export default function App({ Component, pageProps }: AppProps) {
78
return (
89
<ReduxProvider>
910
<SwrConfigProvider>
10-
<Component {...pageProps} />
11+
<ThemeClientWrapper>
12+
<Component {...pageProps} />
13+
</ThemeClientWrapper>
1114
</SwrConfigProvider>
1215
</ReduxProvider>
1316
)

‎src/pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
22

33
export default function Document() {
44
return (
5-
<Html lang="en" data-theme="corporate">
5+
<Html lang="en">
66
<Head />
77
<body>
88
<Main />

‎src/pages/index.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
import { Inter } from 'next/font/google'
22
import ErrorBoundary from '../components/errorBoundary'
33
import Head from 'next/head'
4-
import Link from 'next/link'
4+
import NavBar from '../components/navBar'
55

66
const inter = Inter({ subsets: ['latin'] })
77

88
export default function Home() {
99
return (
1010
<>
1111
<Head>
12-
<title>Event Management App - Rahad</title>
12+
<title>NextJs Starter app by Rahad</title>
1313
<link rel="icon" href="/favicon.ico" />
1414
</Head>
1515
<main className={`mx-auto ${inter.className}`}>
1616
<ErrorBoundary>
17-
<Link className="button" href="/about">
18-
About
19-
</Link>
17+
<NavBar />
2018
</ErrorBoundary>
19+
<div className="flex mt-20 justify-center">
20+
<a
21+
className="underline text-sky-400"
22+
href="https://github.com/rahadkc/nextjs-typescript-redux-jest-cypress-starter"
23+
>
24+
Give a ⭐️ if you like this project! <strong className="text-orange-400 text-2xl">&#9755;</strong>
25+
</a>
26+
</div>
2127
</main>
2228
</>
2329
)

‎src/redux/reducers/events/eventsSlice.ts‎

Whitespace-only changes.

‎src/redux/reducers/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { combineReducers } from 'redux'
2+
import themeSlice from './themeSlice'
23

3-
const rootReducer = combineReducers({})
4+
const rootReducer = combineReducers({
5+
theme: themeSlice,
6+
})
47

58
export default rootReducer

‎src/redux/reducers/themeSlice.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { createSlice } from '@reduxjs/toolkit'
2+
import type { PayloadAction } from '@reduxjs/toolkit'
3+
import { THEME } from '../../lib/enums'
4+
import { RootState } from '../store'
5+
6+
interface InitialState {
7+
theme: THEME
8+
}
9+
10+
const initialState = { theme: THEME.LIGHT } as InitialState
11+
12+
const themeSlice = createSlice({
13+
name: 'theme',
14+
initialState,
15+
reducers: {
16+
changeTheme(state, action: PayloadAction<THEME>) {
17+
state.theme = action.payload
18+
},
19+
},
20+
})
21+
22+
export const { changeTheme } = themeSlice.actions
23+
export const selectTheme = (state: RootState) => state.theme.theme
24+
25+
export default themeSlice.reducer

‎src/styles/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
--border-color: #eeeaea;
99
--accent-color: #07617D;
1010
}
11-
11+
/*
1212
body {
1313
background: var(--background)
14-
}
14+
} */
1515

1616
.auto-column-grid {
1717
display: grid;

0 commit comments

Comments
 (0)