react-icons/bi#BiChevronDown TypeScript Examples
The following examples show how to use
react-icons/bi#BiChevronDown.
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: BlogNav.tsx From vignette-web with MIT License | 5 votes |
|
// en: `ENG`,
// ja: `日本`,
// ko: `한국`,
// 'zh-CN': `中国`,
// 'zh-TW': `中国`,
// fil: `FIL`,
// fr: `FR`,
// id: `IDN`,
// de: `DE`,
// it: `IT`,
// nl: `NL`,
function MyListbox({ router }: { router: NextRouter }) {
const [selectedLocale, setSelectedLocale] = useState(router.locale)
return (
<div>
<Listbox
value={selectedLocale}
onChange={(selected) => {
setSelectedLocale(selected)
setCookies(`NEXT_LOCALE`, selected)
router.push(router.asPath, undefined, {
locale: selected,
})
}}
>
<Listbox.Button className="relative flex w-full cursor-default items-center rounded-lg bg-transparent pl-1 text-left text-sm font-semibold outline-none sm:font-normal">
<ReactCountryFlag
countryCode={locales[selectedLocale as string].flag}
svg
/>
<span className="mx-1">
{locales[selectedLocale as string].shortName}
</span>
<BiChevronDown />
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="w-18 absolute z-100 mt-1 max-h-96 overflow-auto rounded-md border bg-white text-black shadow-lg focus:outline-none dark:border-neutral-700 dark:bg-[#181a1b] dark:text-white">
{Object.keys(locales).map((key) => (
/* Use the `active` state to conditionally style the active option. */
/* Use the `selected` state to conditionally style the selected option. */
<Listbox.Option key={key} value={key} as={Fragment}>
{({ active, selected }) => (
<li
className={`flex cursor-default items-center px-2 py-1 sm:px-1 lg:py-0 ${
active
? `bg-gray-100 dark:bg-neutral-700 `
: `bg-white dark:bg-[#181a1b]`
}`}
>
<ReactCountryFlag countryCode={locales[key].flag} svg />
<span className="mx-1 text-sm text-black dark:text-white">
{locales[key].name}
</span>
{selected && (
<AiOutlineCheck className="fill-black dark:fill-white" />
)}
</li>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</Listbox>
</div>
)
}
Example #2
| Source File: Nav.tsx From vignette-web with MIT License | 5 votes |
|
// en: `ENG`,
// ja: `日本`,
// ko: `한국`,
// 'zh-CN': `中国`,
// 'zh-TW': `中国`,
// fil: `FIL`,
// fr: `FR`,
// id: `IDN`,
// de: `DE`,
// it: `IT`,
// nl: `NL`,
function MyListbox({ router }: { router: NextRouter }) {
const [selectedLocale, setSelectedLocale] = useState(router.locale)
return (
<div>
<Listbox
value={selectedLocale}
onChange={(selected) => {
setSelectedLocale(selected)
setCookies(`NEXT_LOCALE`, selected)
router.push(router.asPath, undefined, {
locale: selected,
})
}}
>
<Listbox.Button className="relative flex w-full cursor-default items-center rounded-lg bg-transparent pl-1 text-left text-sm font-semibold outline-none sm:font-normal">
<ReactCountryFlag
countryCode={locales[selectedLocale as string].flag}
svg
/>
<span className="mx-1">
{locales[selectedLocale as string].shortName}
</span>
<BiChevronDown />
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="w-18 absolute z-100 mt-1 max-h-96 overflow-auto rounded-md border bg-white text-black shadow-lg focus:outline-none dark:border-neutral-700 dark:bg-[#181a1b] dark:text-white">
{Object.keys(locales).map((key) => (
/* Use the `active` state to conditionally style the active option. */
/* Use the `selected` state to conditionally style the selected option. */
<Listbox.Option key={key} value={key} as={Fragment}>
{({ active, selected }) => (
<li
className={`flex cursor-default items-center px-2 py-1 sm:px-1 lg:py-0 ${
active
? `bg-gray-100 dark:bg-neutral-700 `
: `bg-white dark:bg-[#181a1b]`
}`}
>
<ReactCountryFlag countryCode={locales[key].flag} svg />
<span className="mx-1 text-sm text-black dark:text-white">
{locales[key].name}
</span>
{selected && (
<AiOutlineCheck className="fill-black dark:fill-white" />
)}
</li>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</Listbox>
</div>
)
}
Example #3
| Source File: top-nav.tsx From portfolio with MIT License | 4 votes |
|
export default function TopNav() {
const { isOpen, onOpen, onClose } = useDisclosure();
const menuProps = {
bg: useColorModeValue("gray.200", "gray.900"),
color: useColorModeValue("blue.500", "blue.200")
};
return (
<>
<Box bg={useColorModeValue("white", "gray.700")} px={4} boxShadow={"lg"}>
<Flex
h={16}
alignItems={"center"}
justifyContent={"space-between"}
w={["90%", "85%", "80%"]}
maxW={800}
mx="auto"
>
<IconButton
size={"md"}
icon={isOpen ? <AiOutlineClose /> : <GiHamburgerMenu />}
aria-label={"Open Menu"}
display={["inherit", "inherit", "none"]}
onClick={isOpen ? onClose : onOpen}
/>
<HStack spacing={8} alignItems={"center"}>
<Box>
<Avatar
as={Link}
size={"sm"}
href={"/portfolio"}
src={UserIcon}
// src={"https://avatars2.githubusercontent.com/u/37842853?v=4"}
/>
</Box>
<HStack
as={"nav"}
spacing={4}
display={{ base: "none", md: "flex" }}
>
{webLinks.map((link, index) => (
<NavLink
key={index}
name={link.name}
path={link.path}
onClose={onClose}
/>
))}
<Menu isLazy>
<MenuButton
as={Button}
variant="ghost"
size="sm"
px={2}
py={1.5}
fontSize={"1em"}
rounded={"md"}
height={"auto "}
_hover={menuProps}
_expanded={menuProps}
_focus={{ boxShadow: "outline" }}
rightIcon={<BiChevronDown size={18} />}
>
Links
</MenuButton>
<MenuList zIndex={5}>
<Link as={RouterNavLink} to="/tech-stack">
<MenuItem>
<HStack>
<Icon
as={AiTwotoneThunderbolt}
size={18}
color={useColorModeValue("blue.500", "blue.200")}
/>
<Text>Tech Stack</Text>
</HStack>
</MenuItem>
</Link>
<Link as={RouterNavLink} to="/open-source">
<MenuItem>
<HStack>
<Icon
as={BsBook}
size={18}
color={useColorModeValue("blue.500", "blue.200")}
/>
<Text>Open Source</Text>
</HStack>
</MenuItem>
</Link>
<Link as={RouterNavLink} to="/story-timeline">
<MenuItem>
<HStack>
<Icon
as={MdTimeline}
size={18}
color={useColorModeValue("blue.500", "blue.200")}
/>
<Text>Developer Story</Text>
</HStack>
</MenuItem>
</Link>
<Link as={RouterNavLink} to="/achievements">
<MenuItem>
<HStack>
<Icon
as={BsCheckCircle}
size={18}
color={useColorModeValue("blue.500", "blue.200")}
/>
<Text>Achievements</Text>
</HStack>
</MenuItem>
</Link>
</MenuList>
</Menu>
</HStack>
</HStack>
<Flex alignItems={"center"}>
<IconButton
as={Link}
href={"https://github.com/MA-Ahmad"}
size={"md"}
icon={<FaGithub />}
aria-label={"Github account"}
bg={useColorModeValue("white", "gray.700")}
_hover={{
textDecoration: "none",
bg: useColorModeValue("gray.200", "gray.900")
}}
/>
<ColorModeSwitcher justifySelf="flex-end" />
</Flex>
</Flex>
{isOpen ? (
<Box
pb={4}
w={["100%", "100%", "80%"]}
maxW={800}
display={["inherit", "inherit", "none"]}
>
<Stack as={"nav"} spacing={4}>
{mobileLinks.map((link, index) => (
<NavLink
index={index}
name={link.name}
path={link.path}
onClose={onClose}
/>
))}
</Stack>
</Box>
) : null}
</Box>
</>
);
}
