@chakra-ui/icons#SunIcon TypeScript Examples

The following examples show how to use @chakra-ui/icons#SunIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ToggleColorModeButton.tsx    From coindrop with GNU General Public License v3.0 6 votes vote down vote up 
ToggleColorModeButton: FC<ButtonProps> = (buttonProps) => {
    const { colorMode, toggleColorMode } = useColorMode();
    return (
        <Button
            aria-label="Toggle dark mode"
            onClick={toggleColorMode}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...buttonProps}
        >
            {colorMode === 'light' ? <SunIcon /> : <MoonIcon />}
        </Button>
    );
}
Example #2
Source File: Navbar.tsx    From coindrop with GNU General Public License v3.0 5 votes vote down vote up 
UserMenu = () => {
    const { colorMode, toggleColorMode } = useColorMode();
    const { logout } = useUser();
    return (
        <Menu placement="bottom-end">
            <MenuButton as={Button} variant="ghost">
                <HamburgerMenuIcon />
            </MenuButton>
            <MenuList>
                <NextLink href="/account">
                    <MenuItem>
                        <Flex
                            align="center"
                        >
                            <SettingsIcon mr={2} />
                            My Account
                        </Flex>
                    </MenuItem>
                </NextLink>
                {/* This is an external link to ensure Ecwid scripts run on page changes */}
                {/* Should figure out a way to trigger the scripts manually within /shop */}
                {/* <Link href="/shop" style={{textDecoration: "none"}}>
                    <MenuItem>
                        <Flex
                            align="center"
                        >
                            <Icon mr={2} as={AiOutlineShopping} />
                            Shop
                        </Flex>
                    </MenuItem>
                </Link> */}
                <MenuItem
                    onClick={toggleColorMode}
                >
                    <Flex
                        align="center"
                    >
                        {colorMode === 'dark' ? <SunIcon mr={2} /> : <MoonIcon mr={2} />}
                        {colorMode === 'dark' ? 'Light mode' : 'Dark mode'}
                    </Flex>
                </MenuItem>
                <MenuItem
                    onClick={() => {
                        logout();
                    }}
                >
                    <Flex
                        align="center"
                    >
                        <LogoutIcon mr={2} />
                        Log out
                    </Flex>
                </MenuItem>
            </MenuList>
        </Menu>
    );
}
Example #3
Source File: index.tsx    From nextjs-hasura-boilerplate with MIT License 4 votes vote down vote up 
Navbar: NextComponentType = () => {
  const [session] = useSession();
  const { colorMode, toggleColorMode } = useColorMode();

  const handleToggleTheme = () => {
    toggleColorMode();
  };

  const linksForAllUsers = [
    {
      id: "home",
      label: "Home",
      href: "/",
    },
  ];

  const linksForAuthenticatedUsers = [
    {
      id: "feeds",
      label: "Feeds",
      href: "/feeds",
    },
    {
      id: "myAccount",
      label: "My Account",
      href: "/my-account",
    },
  ];

  const signInButtonNode = () => {
    if (session) {
      return false;
    }

    return (
      <Box>
        <Link href="/api/auth/signin">
          <Button
            onClick={(e) => {
              e.preventDefault();
              signIn();
            }}
          >
            Sign In
          </Button>
        </Link>
      </Box>
    );
  };

  const signOutButtonNode = () => {
    if (!session) {
      return false;
    }

    return (
      <Box>
        <Link href="/api/auth/signout">
          <Button
            onClick={(e) => {
              e.preventDefault();
              signOut();
            }}
          >
            Sign Out
          </Button>
        </Link>
      </Box>
    );
  };

  const themeToggleButtonNode = () => {
    return (
      <IconButton
        aria-label="Toggle theme"
        fontSize="20px"
        icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
        onClick={handleToggleTheme}
      />
    );
  };

  return (
    <Box>
      <Box p={4} shadow="lg" pos="relative">
        <Box maxW="xl" mx="auto" w="full">
          <Stack
            isInline
            spacing={4}
            align="center"
            justifyContent="space-between"
            w="full"
          >
            <Box>
              <Stack isInline spacing={4} align="center" fontWeight="semibold">
                {linksForAllUsers.map((link) => {
                  return (
                    <Box key={link.id}>
                      <Link href={link.href}>
                        <_Link>{link.label}</_Link>
                      </Link>
                    </Box>
                  );
                })}
                {session &&
                  linksForAuthenticatedUsers.map((link) => {
                    return (
                      <Box key={link.id}>
                        <Link href={link.href}>
                          <_Link>{link.label}</_Link>
                        </Link>
                      </Box>
                    );
                  })}
              </Stack>
            </Box>
            <Box>
              <Stack isInline spacing={4} align="center">
                {themeToggleButtonNode()}
                {signInButtonNode()}
                {signOutButtonNode()}
              </Stack>
            </Box>
          </Stack>
        </Box>
      </Box>
    </Box>
  );
}