@asgerami/zemenay-blog/dist/components/ThemeToggle.js

Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeToggle = ThemeToggle;
exports.SimpleThemeToggle = SimpleThemeToggle;
const jsx_runtime_1 = require("react/jsx-runtime");
const useTheme_1 = require("../hooks/useTheme");
function ThemeToggle({ className = "", showLabel = true, size = "medium", }) {
    const { theme, resolvedTheme, setTheme, toggleTheme } = (0, useTheme_1.useTheme)();
    const handleThemeChange = (newTheme) => {
        setTheme(newTheme);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `theme-toggle theme-toggle-${size} ${className}`, children: [showLabel && (0, jsx_runtime_1.jsx)("span", { className: "theme-toggle-label", children: "Theme:" }), (0, jsx_runtime_1.jsxs)("div", { className: "theme-toggle-buttons", children: [(0, jsx_runtime_1.jsx)("button", { onClick: toggleTheme, className: `theme-toggle-quick ${resolvedTheme}`, title: `Switch to ${resolvedTheme === "light" ? "dark" : "light"} mode`, children: (0, jsx_runtime_1.jsx)("span", { className: "theme-icon", children: resolvedTheme === "light" ? "🌙" : "☀️" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "theme-dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: "theme-dropdown-trigger", children: [(0, jsx_runtime_1.jsx)("span", { className: "theme-current", children: theme === "system" ? "🖥️" : theme === "light" ? "☀️" : "🌙" }), (0, jsx_runtime_1.jsx)("span", { className: "dropdown-arrow", children: "\u25BC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "theme-dropdown-menu", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => handleThemeChange("light"), className: `theme-option ${theme === "light" ? "active" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "theme-icon", children: "\u2600\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { children: "Light" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleThemeChange("dark"), className: `theme-option ${theme === "dark" ? "active" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "theme-icon", children: "\uD83C\uDF19" }), (0, jsx_runtime_1.jsx)("span", { children: "Dark" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => handleThemeChange("system"), className: `theme-option ${theme === "system" ? "active" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "theme-icon", children: "\uD83D\uDDA5\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { children: "System" })] })] })] })] })] }));
}
function SimpleThemeToggle({ className = "" }) {
    const { resolvedTheme, toggleTheme } = (0, useTheme_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)("button", { onClick: toggleTheme, className: `simple-theme-toggle ${className}`, title: `Switch to ${resolvedTheme === "light" ? "dark" : "light"} mode`, children: (0, jsx_runtime_1.jsx)("span", { className: "theme-icon", children: resolvedTheme === "light" ? "🌙" : "☀️" }) }));
}