{"size": 1332, "ext": "js", "max_stars_repo_path": "src/components/ChristmasModeToggle.js", "max_stars_repo_name": "chowder/glypoon", "max_stars_repo_stars_event_min_datetime": "2021-04-03T16:18:24.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-08T10:43:23.000Z", "max_issues_repo_path": "src/components/ChristmasModeToggle.js", "max_issues_repo_name": "chowder/glypoon", "max_issues_repo_issues_event_min_datetime": "2021-04-02T01:31:51.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-28T14:13:25.000Z", "max_forks_repo_path": "src/components/ChristmasModeToggle.js", "max_forks_repo_name": "chowder/glypoon", "max_forks_repo_forks_event_min_datetime": "2021-04-02T18:28:18.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-14T14:22:55.000Z"}
{"max_stars_count": 3, "max_issues_count": 26, "max_forks_count": 4, "avg_line_length": 45.9310344828, "max_line_length": 226, "alphanum_fraction": 0.6246246246}
import { useState, useEffect } from 'react'

const DarkModeToggle = ({ onToggle, isChristmasMode }) => {
    const [toggleActive, setToggleActive] = useState(isChristmasMode)

    useEffect(() => {
        setToggleActive(isChristmasMode)
    }, [isChristmasMode])

    const handleClick = () => {
        setToggleActive(!toggleActive)
        onToggle()
    }

    return (
        <div className="flex flex-row space-x-3 items-center">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline-block text-red-400 transition-colors" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-rule="evenodd" />
                <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
            </svg>
            <div className={`w-10 h-6 flex items-center rounded-full p-1 duration-300 ease-out ${toggleActive ? "bg-green-400" : "bg-gray-300"}`} onClick={handleClick}>
                <div className={`bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-out ${toggleActive ? "translate-x-4" : "translate-x-0"}`} />
            </div>
        </div>
    )
}

export default DarkModeToggle
