Skip to content

Commit 061aaae

Browse files
NyctibiusVIINyctibiusVII
committed
feat: Toggle theme
1 parent 58d3485 commit 061aaae

9 files changed

Lines changed: 340 additions & 78 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"eslint-config-next": "13.3.1",
2222
"next": "13.3.1",
2323
"next-sitemap": "^4.0.9",
24+
"next-themes": "^0.2.1",
2425
"postcss": "8.4.23",
2526
"react": "18.2.0",
2627
"react-dom": "18.2.0",

‎src/components/details/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { useEffect, useState } from 'react'
22
import { v4 as uuid } from 'uuid'
33

4-
interface DetailsProps {
5-
children: React.ReactNode
6-
summary?: string
7-
}
4+
import { DetailsProps } from '@/interfaces/types'
85

96
export const Details = ({ summary = 'Title', children }: DetailsProps) => {
107
const [detailsOpen, setDetailsOpen] = useState(false)
@@ -24,10 +21,10 @@ export const Details = ({ summary = 'Title', children }: DetailsProps) => {
2421

2522
return (
2623
<details data-details-id={detailsId} open={detailsOpen}>
27-
<summary className={`bg-gray-800 ${detailsOpen ? 'rounded-t-lg' : 'rounded-lg'} px-4 py-1 cursor-pointer`}>
24+
<summary className={`${detailsOpen ? 'rounded-t-lg' : 'rounded-lg'} px-4 py-1 cursor-pointer`}>
2825
{summary}
2926
</summary>
30-
<div className='bg-gray-700 rounded-b-lg px-4 py-1'>
27+
<div className='rounded-b-lg px-4 py-1'>
3128
{children}
3229
</div>
3330
</details>

‎src/components/input/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { InputProps } from '@/interfaces/types'
66
export const Input = ({ withForm=true, ...props }: InputProps) => withForm ? <UnFormInput {...props}/> : <InputComponent {...props}/>
77

88
const InputComponent = ({ name, label, labelPosition='before', container=false, className, ...props }: InputProps) => {
9-
const Input = <input className={`inputNumberValues border border-dashed rounded-lg pl-1 ${className}`} {...props}/>
9+
const Input = <input className={`border border-dashed border-violet-500 rounded-lg pl-1 ${className}`} {...props}/>
1010
const Label = <label htmlFor={name} className='max-w-[13rem]'>{label}</label>
1111

1212
return <>{ container ?

‎src/components/sidebar/index.tsx‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useEffect, useState } from 'react'
2-
31
import { HiMenu, HiX } from 'react-icons/hi'
2+
import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'
3+
import { useTheme } from 'next-themes'
44

55
import { useSchoolReportConfig } from '@/hooks/useSchoolReportConfig'
66
import { useSidebar } from '@/hooks/useSidebar'
@@ -9,8 +9,12 @@ import { Input } from '@/components/input'
99

1010
export const Sidebar = () => {
1111
const {isOpen, toggleSidebar} = useSidebar()
12+
13+
const { systemTheme, theme, setTheme } = useTheme()
14+
const currentTheme = theme === 'system' ? systemTheme : theme
15+
const toggleTheme = () => currentTheme === 'dark' ? setTheme('light') : setTheme('dark')
16+
1217
const {
13-
setSchoolReportColors,
1418
minimumAttendancePercentageToPass,
1519
setMinimumAttendancePercentageToPass,
1620
minimumPassingGrade,
@@ -19,31 +23,6 @@ export const Sidebar = () => {
1923
setMinimumRecoveryGrade
2024
} = useSchoolReportConfig()
2125

22-
const [toggleColor, setToggleColor] = useState(true)
23-
24-
useEffect(() => {
25-
toggleColor
26-
? setSchoolReportColors({
27-
card: `bg-white`,
28-
border: `border-gray-950`,
29-
clippingBorder: `border-red-600`,
30-
signatures: `bg-gray-950`,
31-
text: `text-gray-950`,
32-
insufficientGrade: `text-red-600`,
33-
enoughGrade: `text-green-500`
34-
})
35-
: setSchoolReportColors({
36-
card: `bg-black`,
37-
border: `border-white`,
38-
clippingBorder: `border-red-600`,
39-
signatures: `bg-gray-100`,
40-
text: `text-gray-100`,
41-
insufficientGrade: `text-red-600`,
42-
enoughGrade: `text-green-500`
43-
})
44-
}, [setSchoolReportColors, toggleColor])
45-
46-
4726
return (
4827
<aside className={
4928
`${isOpen
@@ -117,13 +96,12 @@ export const Sidebar = () => {
11796
<p>content</p>
11897
</Details>
11998
<Details summary='Cores'>
120-
{/* <select className='appearance-none'>
121-
<option>cor1</option>
122-
<option>cor2</option>
123-
<option>cor2</option>
124-
</select> */}
125-
<button className='w-full bg-gray-800 p-2 rounded-md' onClick={() => setToggleColor(!toggleColor)}>test: toggleColor</button>
126-
<div className={`${toggleColor ? 'bg-white' : 'bg-black'} w-full h-4 mt-2 rounded-md`} />
99+
<button onClick={toggleTheme} className='w-full hover:bg-shadow-5 hover:dark:bg-shadow-15 border border-shadow-15 flex items-center justify-center gap-2 py-1 rounded-md'>
100+
{ currentTheme === 'dark'
101+
? <MdOutlineLightMode className='text-xl' />
102+
: <MdOutlineDarkMode className='text-xl' />
103+
} Mudar Tema
104+
</button>
127105
</Details>
128106
</div>
129107
}

‎src/interfaces/types.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export interface SchoolReport {
7272
student: Student
7373
studentAcademicRecord: StudentAcademicRecord
7474
}
75-
/* Components/Form/Input */
75+
/* Components/Input */
7676
type InputType = {
7777
name: string
7878
label?: string
@@ -83,4 +83,10 @@ type InputType = {
8383
/**
8484
* Defines the types of native input properties.
8585
*/
86-
export type InputProps = JSX.IntrinsicElements['input'] & InputType
86+
export type InputProps = JSX.IntrinsicElements['input'] & InputType
87+
/* Components/Details */
88+
type DetailsType = { summary?: string }
89+
/**
90+
* Defines the types of native details properties.
91+
*/
92+
export type DetailsProps = JSX.IntrinsicElements['details'] & DetailsType

‎src/pages/_app.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { AppProps } from 'next/app'
22

3+
import { ThemeProvider } from 'next-themes'
34
import { SidebarProvider } from '@/contexts/SidebarContext'
45
import { GenerateImageProvider } from '@/contexts/GenerateImageContext'
56
import { SchoolReportConfigProvider } from '@/contexts/SchoolReportConfigContext'
@@ -9,14 +10,16 @@ import '@/styles/globals.css'
910

1011
export default function App({ Component, pageProps }: AppProps) {
1112
return (
12-
<SidebarProvider>
13-
<SchoolReportConfigProvider>
14-
<SchoolReportProvider>
15-
<GenerateImageProvider>
16-
<Component {...pageProps} />
17-
</GenerateImageProvider>
18-
</SchoolReportProvider>
19-
</SchoolReportConfigProvider>
20-
</SidebarProvider>
13+
<ThemeProvider attribute='class'>
14+
<SidebarProvider>
15+
<SchoolReportConfigProvider>
16+
<SchoolReportProvider>
17+
<GenerateImageProvider>
18+
<Component {...pageProps} />
19+
</GenerateImageProvider>
20+
</SchoolReportProvider>
21+
</SchoolReportConfigProvider>
22+
</SidebarProvider>
23+
</ThemeProvider>
2124
)
2225
}

‎src/styles/globals.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
@tailwind utilities;
44

55
@layer base {
6-
body { @apply antialiased bg-rose-100 text-gray-950 dark:bg-gray-950 dark:text-gray-100; }
6+
body { @apply antialiased bg-slate-200 text-gray-950 dark:bg-gray-950 dark:text-gray-100; }
77
input { @apply truncate; }
8-
aside { @apply bg-rose-50 dark:bg-gray-900; }
9-
aside input { @apply bg-rose-50 dark:bg-gray-900; }
8+
aside { @apply bg-slate-100 dark:bg-gray-900; }
9+
aside input { @apply bg-slate-100 dark:bg-gray-900; }
10+
summary { @apply bg-slate-300 dark:bg-gray-800; }
11+
summary ~ div { @apply bg-slate-200 dark:bg-gray-700; }
1012

1113
input:-webkit-autofill,
1214
input:-webkit-autofill:hover,
@@ -19,7 +21,7 @@
1921
::-webkit-scrollbar:horizontal { @apply h-2; }
2022
::-webkit-scrollbar,
2123
::-webkit-scrollbar:horizontal { @apply bg-shadow-15 rounded-lg; }
22-
::-webkit-scrollbar-thumb { @apply bg-rose-400 dark:bg-violet-500 rounded-lg; }
24+
::-webkit-scrollbar-thumb { @apply bg-violet-500 rounded-lg; }
2325
::-webkit-scrollbar-corner { @apply bg-transparent; }
2426
}
2527
@layer components {

0 commit comments

Comments
 (0)