dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: Lucide React Icon and Animation for Theme

Browse Source
This commit is contained in:
EvanLin3141
2025-02-05 14:45:24 +00:00
parent 1740b5d921
commit 2c65606efe
4 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/Layout/Theme.tsx
View File

@@ -1,18 +1,22 @@
import React from 'react'
import React from 'react';
import { SunMoon as SunMoonIcon } from 'lucide-react';
interface ThemeProps {
children? : React.ReactNode;
onClick : () => void;
children?: React.ReactNode;
onClick: () => void;
}
const Theme: React.FC<ThemeProps> = ( {onClick, children} ) => {
const Theme: React.FC<ThemeProps> = ({ onClick }) => {
return (
<button
onClick={onClick}
className={` p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}>
Light/Dark
<button
onClick={onClick}
className="p-2 text-[1.5rem] flex items-center gap-2 text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all"
>
<SunMoonIcon
className={`transition-transform duration-300 ease-in-out`}
/>
</button>
)
}
);
};
export default Theme
export default Theme;