react-icons/ai#AiTwotoneThunderbolt TypeScript Examples
The following examples show how to use
react-icons/ai#AiTwotoneThunderbolt.
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: tech-stack.tsx From portfolio with MIT License | 4 votes |
|
TechStack = () => {
const [skillsList, setSkillsList] = useState([]);
React.useEffect(() => {
setSkillsList(skills);
}, []);
const filterSkills = tab => {
console.log(skills.filter(skill => skill.type === tab));
if (tab.length) setSkillsList(skills.filter(skill => skill.type === tab));
else setSkillsList(skills);
};
return (
<PageSlideFade>
<VStack spacing={8}>
<Section>
<VStack>
<Header mt={0} mb={1}>
Tech Stack
</Header>
<Text
fontSize={"xl"}
color={useColorModeValue("gray.500", "gray.200")}
maxW="lg"
textAlign="center"
>
A list of my favorite tools and technologies that I use on a
regular basis.
</Text>
</VStack>
</Section>
<Section>
<Tabs
variant="soft-rounded"
colorScheme="blue"
align="center"
w="100%"
>
<TabList display="flex" flexWrap="wrap">
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "green.800",
bg: "green.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("")}
>
<HStack spacing={1}>
<Icon as={AiTwotoneThunderbolt} weight="fill" />
<Text>All</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.500", "gray.500")}
_selected={{
color: useColorModeValue("gray.100", "gray.800"),
bg: useColorModeValue("gray.900", "gray.100")
}}
mr={2}
mt={2}
onClick={() => filterSkills("development")}
>
<HStack spacing={1}>
<Icon as={BiDesktop} weight="fill" />
<Text>Web Development</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "green.800",
bg: "green.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("design")}
>
<HStack spacing={1}>
<Icon as={GiSpiderWeb} weight="fill" />
<Text>Web Design</Text>
</HStack>
</Tab>
<Tab
bg={useColorModeValue("gray.100", "gray.800")}
color={useColorModeValue("gray.600", "gray.500")}
_selected={{
color: "red.800",
bg: "red.100"
}}
mr={2}
mt={2}
onClick={() => filterSkills("devops")}
>
<HStack spacing={1}>
<Icon as={AiOutlineCloudServer} weight="fill" />
<Text>Devops</Text>
</HStack>
</Tab>
</TabList>
<TabPanels minHeight={"45vh"}>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
<TabPanel px={0}>
<MotionBox
variants={container}
initial="hidden"
animate="visible"
>
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{skillsList.map((tool, index) => (
<SkillCard
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
platform={"web"}
link={tool.link}
/>
))}
</SimpleGrid>
</MotionBox>
</TabPanel>
</TabPanels>
</Tabs>
</Section>
</VStack>
</PageSlideFade>
);
}
Example #2
| 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>
</>
);
}
