fix: night switch style
This commit is contained in:
@@ -1,24 +1,40 @@
|
||||
'use client';
|
||||
|
||||
import { Moon, Sun1 } from 'iconsax-react';
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
|
||||
|
||||
} & React.InputHTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export default function NightModeSwitch({ checked, onClick }: Props) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`visual-switch relative inline-flex justify-between px-1.5 h-6 w-10.5 items-center rounded-full transition-colors duration-300 ${checked ? "bg-gray-800" : "bg-gray-300"
|
||||
}`}
|
||||
data-nightmode={checked}
|
||||
className={
|
||||
`visual-switch relative inline-flex justify-between
|
||||
px-1.5 h-6 w-10.5 items-center rounded-full transition-colors
|
||||
duration-300 bg-gray-300 data-[nightmode=true]:bg-gray-800
|
||||
`}
|
||||
>
|
||||
A
|
||||
<span
|
||||
className={`absolute inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300 ${checked ? "translate-x-1" : "-translate-x-3.5"
|
||||
}`}
|
||||
data-nightmode={checked}
|
||||
className={`
|
||||
absolute inline-block h-5 w-5 transform rounded-full
|
||||
transition-transform duration-300
|
||||
bg-white data-[nightmode=true]:bg-gray-600
|
||||
-translate-x-3.5 data-[nightmode=true]:translate-x-1
|
||||
`}
|
||||
/>
|
||||
B
|
||||
<Moon
|
||||
data-nightmode={checked}
|
||||
size={12}
|
||||
className='stroke-primary z-0 data-[nightmode=true]:stroke-white' />
|
||||
<Sun1
|
||||
data-nightmode={checked}
|
||||
size={12}
|
||||
className='stroke-[#FFA800] z-0' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -156,7 +156,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
|
||||
)
|
||||
})}
|
||||
<li className="mt-4 h-6">
|
||||
<SideMenuItem href={''} title={''} icon={<></>}>
|
||||
<SideMenuItem
|
||||
className='pr-7'
|
||||
href={''}
|
||||
title={''}
|
||||
icon={<></>}>
|
||||
<NightModeSwitch checked={nightModeState} onClick={togglenightModeState} />
|
||||
</SideMenuItem>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user