github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/ThemeToggle/index.tsx (about)

     1  import DashboardIcon from "../dashboards/common/DashboardIcon";
     2  import { classNames } from "../../utils/styles";
     3  import { ThemeNames } from "../../hooks/useTheme";
     4  import { useDashboard } from "../../hooks/useDashboard";
     5  
     6  const ThemeToggle = () => {
     7    const {
     8      themeContext: { setTheme, theme },
     9    } = useDashboard();
    10    return (
    11      <button
    12        type="button"
    13        className={classNames(
    14          theme.name === ThemeNames.STEAMPIPE_DEFAULT
    15            ? "bg-gray-200"
    16            : "bg-gray-500",
    17          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-indigo-500"
    18        )}
    19        onClick={() =>
    20          setTheme(
    21            theme.name === ThemeNames.STEAMPIPE_DEFAULT
    22              ? ThemeNames.STEAMPIPE_DARK
    23              : ThemeNames.STEAMPIPE_DEFAULT
    24          )
    25        }
    26        aria-pressed="false"
    27      >
    28        <span className="sr-only">Use setting</span>
    29        <span
    30          className={classNames(
    31            theme.name === ThemeNames.STEAMPIPE_DEFAULT
    32              ? "translate-x-0"
    33              : "translate-x-5",
    34            "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-dashboard-panel shadow transform ring-0 transition ease-in-out duration-200"
    35          )}
    36        >
    37          <span
    38            className={classNames(
    39              theme.name === ThemeNames.STEAMPIPE_DEFAULT
    40                ? "opacity-100 ease-in duration-200"
    41                : "opacity-0 ease-out duration-100",
    42              "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
    43            )}
    44            aria-hidden="true"
    45          >
    46            <DashboardIcon
    47              className="text-gray-500"
    48              icon="materialsymbols-solid:light_mode"
    49            />
    50          </span>
    51          <span
    52            className={classNames(
    53              theme.name === ThemeNames.STEAMPIPE_DEFAULT
    54                ? "opacity-0 ease-out duration-100"
    55                : "opacity-100 ease-in duration-200",
    56              "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
    57            )}
    58            aria-hidden="true"
    59          >
    60            <DashboardIcon
    61              className="text-gray-500"
    62              icon="materialsymbols-solid:dark_mode"
    63            />
    64          </span>
    65        </span>
    66      </button>
    67    );
    68  };
    69  
    70  export default ThemeToggle;