react-icons/fi#FiGithub TypeScript Examples
The following examples show how to use
react-icons/fi#FiGithub.
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: Setup.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
|
NavBar = (): JSX.Element => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
height="20"
alignItems="center"
borderBottomWidth="1px"
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
justifyContent='space-between'
p={4}
pl={6}
>
<Flex alignItems="center" justifyContent='flex-start'>
<img src={logo} className="logo" alt="logo" height={48} />
<Text fontSize="1xl" ml={2}>BlueBubbles</Text>
</Flex>
<Flex justifyContent='flex-end'>
<HStack spacing={{ base: '0', md: '1' }}>
<Tooltip label="Website Home" aria-label="website-tip">
<Link href="https://bluebubbles.app" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="website" icon={<AiOutlineHome />} />
</Link>
</Tooltip>
<Tooltip label="BlueBubbles Web" aria-label="website-tip">
<Link href="https://bluebubbles.app/web" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="bluebubbles web" icon={<FiMessageCircle />} />
</Link>
</Tooltip>
<Tooltip label="Support Us" aria-label="donate-tip">
<Link href="https://bluebubbles.app/donate" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<MdOutlineAttachMoney />} />
</Link>
</Tooltip>
<Tooltip label="Join our Discord" aria-label="discord-tip">
<Link href="https://discord.gg/yC4wr38" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="discord" icon={<FaDiscord />} />
</Link>
</Tooltip>
<Tooltip label="Read our Source Code" aria-label="github-tip">
<Link href="https://github.com/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="github" icon={<FiGithub />} />
</Link>
</Tooltip>
<Spacer />
<Divider orientation="vertical" width={1} height={15} borderColor='gray' />
<Spacer />
<Spacer />
<Spacer />
<FormControl display='flex' alignItems='center'>
<Box mr={2}><MdOutlineDarkMode size={20} /></Box>
<Switch id='theme-mode-toggle' onChange={toggleColorMode} isChecked={colorMode === 'light'} />
<Box ml={2}><MdOutlineLightMode size={20} /></Box>
</FormControl>
</HStack>
</Flex>
</Flex>
);
}
Example #2
| Source File: Header.tsx From webapis-playground with MIT License | 5 votes |
|
function Header() {
return (
<header
className="
tw-fixed
tw-top-0
tw-left-0
tw-z-10
tw-w-full
tw-border-b
tw-bg-white
tw-border-gray-200
"
>
<div
className="
tw-py-3
tw-px-4
tw-w-full
tw-max-w-container
tw-mx-auto
tw-flex
tw-items-center
tw-justify-between
"
>
<Link href="/" passHref>
<a
className="
tw-flex
tw-items-center
tw-text-lg
tw-font-bold
tw-text-gray-700
"
>
<div className="tw-inline-flex tw-mr-2">
<Image
src="/assets/svg/logoDark.svg"
width={24}
height={24}
alt="Web APIs"
aria-hidden="true"
/>
</div>
Web APIs
</a>
</Link>
<div className=" tw-flex tw-items-center tw-space-x-2">
<IconButton
as="a"
href="https://github.com/atapas/webapis-playground"
rel="noopener noreferrer"
target="_blank"
ariaLabel="Source code"
icon={<FiGithub />}
/>
<IconButton
as="a"
href="https://twitter.com/intent/tweet?text=Check%20this%20amazing%20Web%20APIs%20demo%20https://webapis-playground.vercel.app/,%20created%20by%20@tapasadhikary%20@MaxProgramming1%0A%0A%23DEVCommunity%20%23100DaysOfCode"
rel="noopener noreferrer"
target="_blank"
ariaLabel="Share on twitter"
icon={<FiTwitter />}
/>
</div>
</div>
</header>
);
}
Example #3
| Source File: Navigation.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
|
MobileNav = ({ onOpen, onNotificationOpen, unreadCount, ...rest }: MobileProps) => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
ml={{ base: 0, md: 60 }}
px={{ base: 4, md: 4 }}
height="20"
alignItems="center"
borderBottomWidth="1px"
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
justifyContent={{ base: 'space-between', md: 'flex-end' }}
{...rest}
>
<IconButton
display={{ base: 'flex', md: 'none' }}
onClick={onOpen}
variant="outline"
aria-label="open menu"
icon={<FiMenu />}
/>
<Text display={{ base: 'flex', md: 'none' }} fontSize="2xl" fontFamily="monospace" fontWeight="bold">
<img src={logo} className="logo-small" alt="logo" />
</Text>
<HStack spacing={{ base: '0', md: '1' }}>
<Tooltip label="Website Home" aria-label="website-tip">
<Link href="https://bluebubbles.app" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="website" icon={<AiOutlineHome />} />
</Link>
</Tooltip>
<Tooltip label="BlueBubbles Web" aria-label="website-tip">
<Link href="https://bluebubbles.app/web" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="bluebubbles web" icon={<FiMessageCircle />} />
</Link>
</Tooltip>
<Tooltip label="Sponsor Us" aria-label="sponsor-tip">
<Link href="https://github.com/sponsors/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<AiOutlineHeart />} />
</Link>
</Tooltip>
<Tooltip label="Support Us" aria-label="donate-tip">
<Link href="https://bluebubbles.app/donate" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="donate" icon={<MdOutlineAttachMoney />} />
</Link>
</Tooltip>
<Tooltip label="Join our Discord" aria-label="discord-tip">
<Link href="https://discord.gg/yC4wr38" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="discord" icon={<FaDiscord />} />
</Link>
</Tooltip>
<Tooltip label="Read our Source Code" aria-label="github-tip">
<Link href="https://github.com/BlueBubblesApp" style={{ textDecoration: 'none' }} target="_blank">
<IconButton size="lg" variant="ghost" aria-label="github" icon={<FiGithub />} />
</Link>
</Tooltip>
<Box position='relative' float='left'>
<IconButton
size="lg"
verticalAlign='middle'
zIndex={1}
variant="ghost"
aria-label="notifications"
icon={<FiBell />}
onClick={() => onNotificationOpen()}
/>
{(unreadCount > 0) ? (
<Badge
borderRadius='lg'
variant='solid'
colorScheme='red'
position='absolute'
margin={0}
top={1}
right={1}
zIndex={2}
>{unreadCount}</Badge>
) : null}
</Box>
<Spacer />
<Divider orientation="vertical" width={1} height={15} borderColor='gray' />
<Spacer />
<Spacer />
<Spacer />
<FormControl display='flex' alignItems='center'>
<Box mr={2}><MdOutlineDarkMode size={20} /></Box>
<Switch id='theme-mode-toggle' onChange={toggleColorMode} isChecked={colorMode === 'light'} />
<Box ml={2}><MdOutlineLightMode size={20} /></Box>
</FormControl>
</HStack>
</Flex>
);
}
Example #4
| Source File: notebook-post.tsx From portfolio with MIT License | 4 votes |
|
NotebookPost: React.SFC<PostProps> = () => {
const textColor = useColorModeValue("gray.500", "gray.200");
const post = articles[4];
return (
<>
<VStack mt={0} mb={6} spacing={1} align="start">
<Heading as="h1" fontSize="3xl" lineHeight="shorter" fontWeight="bold">
{post.title}
</Heading>
<Divider
orientation="horizontal"
opacity={1}
borderBottomWidth={0}
height={"1px"}
bg={"gray.200"}
/>
</VStack>
<Flex
justifyContent={"space-between"}
flexDirection={["column", "row", "row"]}
>
<HStack spacing={2} isInline>
<Text fontSize="sm" fontWeight="400" color={textColor}>
{post.published}
</Text>
<Text fontSize="sm" fontWeight="400" color={textColor}>
•
</Text>
<Tooltip hasArrow label="Views" placement="top">
<Flex alignItems="center">
<Text
fontSize="sm"
noOfLines={1}
fontWeight="400"
align="left"
color={textColor}
>
{post.views}
</Text>
<Icon as={FaEye} ml={1} color={textColor} />
</Flex>
</Tooltip>
<Text fontSize="sm" fontWeight="600" color={textColor}>
•
</Text>
<Tooltip hasArrow label="Read time" placement="top">
<Text
fontSize="sm"
noOfLines={1}
fontWeight="400"
align="left"
color={textColor}
>
{post.readTime}
</Text>
</Tooltip>
</HStack>
<HStack spacing={1} alignItems="center">
{post.tags.map(tag => (
<Tag
size="sm"
padding="0 3px"
key={tag}
colorScheme={getTagColor(tag)}
>
{tag}
</Tag>
))}
</HStack>
</Flex>
<HStack align="end" mt={5}>
<Link href={post.live} isExternal>
<Button
ml={2}
variant="outline"
size={["sm"]}
color={useColorModeValue("green.600", "green.200")}
bg={useColorModeValue("white", "gray.800")}
leftIcon={<BiLinkExternal size={18} />}
>
Demo
</Button>
</Link>
<Link href={post.github_url} isExternal>
<Button
ml={2}
variant="outline"
size={["sm"]}
color={useColorModeValue("green.600", "green.200")}
bg={useColorModeValue("white", "gray.800")}
leftIcon={<FiGithub size={18} />}
>
Github link
</Button>
</Link>
</HStack>
<Box height={["35vh", "45vh", "55vh", "70vh"]} marginTop={5}>
<Carousel images={post.images} />
</Box>
<VStack spacing={5} align={"start"} mt={6}>
<Header fontSize={"xl"} mt={0} mb={0}>
What will you learn?
</Header>
<Box fontSize="md">
<UnorderedList textAlign="left" paddingLeft={5} m={0}>
<ListItem>How to create a CRUD app with react</ListItem>
<ListItem>How to create a responsive app using ChakraUi</ListItem>
<ListItem>How to use animations with framer-motion</ListItem>
<ListItem>How to create slider with framer-motion</ListItem>
</UnorderedList>
</Box>
</VStack>
<VStack spacing={5} align={"start"} mt={6}>
<Header fontSize={"xl"} mt={0} mb={0}>
Built with
</Header>
<Box fontSize="md">
<UnorderedList textAlign="left" paddingLeft={5} m={0}>
<ListItem>
Programming language -{" "}
<Link
href="https://www.typescriptlang.org/"
isExternal
color={"blue.500"}
>
Typescript
</Link>
</ListItem>
<ListItem>
Front-end library -{" "}
<Link
href="https://github.com/facebook/react/"
isExternal
color={"blue.500"}
>
React
</Link>
</ListItem>
<ListItem>
UI components -{" "}
<Link href="https://chakra-ui.com/" isExternal color={"blue.500"}>
Chakra-ui
</Link>
</ListItem>
<ListItem>
Animation library -{" "}
<Link
href="https://www.framer.com/motion/"
isExternal
color={"blue.500"}
>
Framer motion
</Link>
</ListItem>
<ListItem>
Notes display -{" "}
<Link
href="https://github.com/tsuyoshiwada/react-stack-grid"
isExternal
color={"blue.500"}
>
react-stack-grid
</Link>
</ListItem>
<ListItem>
Forms Validation -{" "}
<Link
href="https://react-hook-form.com/"
isExternal
color={"blue.500"}
>
React hook form
</Link>
</ListItem>
<ListItem>
Icons -{" "}
<Link
href="https://react-icons.github.io/react-icons/"
isExternal
color={"blue.500"}
>
React icons
</Link>
</ListItem>
<ListItem>
Images placeholder -{" "}
<Link href="https://blurha.sh/" isExternal color={"blue.500"}>
blurhash
</Link>
</ListItem>
<ListItem>
Progressive image loading -{" "}
<Link
href="https://github.com/FormidableLabs/react-progressive-image"
isExternal
color={"blue.500"}
>
react-progressive-image
</Link>
</ListItem>
</UnorderedList>
</Box>
</VStack>
</>
);
}
Example #5
| Source File: live-data-card.tsx From portfolio with MIT License | 4 votes |
|
RepositoryCard = (props: RepositoryCardProps) => {
const {
title,
description,
language,
url,
stargazers_count,
forks_count,
} = props;
const handleLinkClick = (
e: React.MouseEvent<HTMLParagraphElement, MouseEvent>,
link: string
) => {
window.open(link);
e.stopPropagation();
};
return (
<MotionBox whileHover={{ y: -5 }}>
<Box
size="xl"
py={2}
px={[2, 4]}
mt={2}
rounded="xl"
borderWidth="1px"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("gray.100", "gray.700")}
_hover={{
shadow: "lg",
textDecoration: "none"
}}
>
<VStack overflow="hidden" align="start" spacing={1}>
<VStack spacing={1} align="start" w="100%">
<Flex
justifyContent={"space-between"}
width="100%"
onClick={e => handleLinkClick(e, url)}
>
<Tooltip hasArrow label="Github link" placement="top">
<HStack cursor={"pointer"}>
<Icon as={FiGithub} boxSize="0.9em" mt={"1px"} />
<Text
fontSize="sm"
noOfLines={1}
fontWeight="600"
align="left"
color={"blue.500"}
>
{title}
</Text>
</HStack>
</Tooltip>
<HStack cursor={"pointer"} onClick={e => handleLinkClick(e, url)}>
{forks_count && (
<Box _hover={{ color: "blue.500" }}>
<Icon as={BiGitRepoForked} boxSize="0.9em" mt={"1px"} />
<Box as="span" ml="1" fontSize="sm">
{forks_count}
</Box>
</Box>
)}
<Box _hover={{ color: "blue.500" }}>
<Icon as={BiStar} boxSize="0.9em" mt={"1px"} />
<Box as="span" ml="1" fontSize="sm">
{stargazers_count}
</Box>
</Box>
</HStack>
</Flex>
{language && (
<Flex justifyContent={"space-between"} width="100%">
<Box>
<HStack spacing="1">
<Tag size="sm" colorScheme={getTagColor(language)}>
<Text fontSize={["0.55rem", "inherit", "inherit"]}>
{language}
</Text>
</Tag>
</HStack>
</Box>
</Flex>
)}
</VStack>
<Box>
<Text color="gray.500" fontSize="sm" noOfLines={2} textAlign="left">
{description}
</Text>
</Box>{" "}
</VStack>
</Box>
</MotionBox>
);
}
Example #6
| Source File: offline-data-card.tsx From portfolio with MIT License | 4 votes |
|
RepositoryCard = (props: RepositoryCardProps) => {
const {
key,
title,
description,
cover,
blurHash,
technologies,
url,
live,
stars,
fork,
} = props;
const { isOpen, onOpen, onClose } = useDisclosure();
const handleClick = () => {
onOpen();
// window.open(link);
// if (type == "link" || type == "article") {
// window.open(link);
// } else {
// onOpen();
// }
};
const handleLinkClick = (
e: React.MouseEvent<HTMLParagraphElement, MouseEvent>,
link: string
) => {
window.open(link);
e.stopPropagation();
};
const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] };
const thumbnailVariants = {
initial: { scale: 0.9, opacity: 0 },
enter: { scale: 1, opacity: 1, transition },
exit: {
scale: 0.5,
opacity: 0,
transition: { duration: 1.5, ...transition }
}
};
const imageVariants = {
hover: { scale: 1.1 }
};
return (
<CardTransition>
<Box onClick={handleClick} cursor="pointer" size="xl">
<VStack
// w="100%"
rounded="xl"
borderWidth="1px"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("gray.100", "gray.700")}
_hover={{
shadow: "lg",
textDecoration: "none"
}}
overflow="hidden"
align="start"
spacing={0}
>
<Box position="relative" w="100%">
<MotionBox variants={thumbnailVariants}>
<MotionBox
whileHover="hover"
variants={imageVariants}
transition={transition}
>
<AspectRatio
ratio={1.85 / 1}
maxW="400px"
w="100%"
borderBottomWidth="1px"
borderColor={useColorModeValue("gray.100", "gray.700")}
>
{/* <Image
src={cover}
fallback={<Skeleton />}
objectFit="cover"
/> */}
<LazyImage
src={cover}
blurHash={blurHash}
/>
</AspectRatio>
</MotionBox>
</MotionBox>
</Box>
<VStack py={2} px={[2, 4]} spacing={1} align="start" w="100%">
<Flex justifyContent={"space-between"} width="100%">
<Tooltip hasArrow label="Github link" placement="top">
<HStack>
<Icon as={FiGithub} boxSize="0.9em" mt={"1px"} />
{/* <Link href={url} isExternal> */}
<Text
fontSize="sm"
noOfLines={1}
fontWeight="600"
align="left"
onClick={e => handleLinkClick(e, url)}
>
{title}
</Text>
</HStack>
</Tooltip>
{/* </Link> */}
<Flex>
<Icon as={AiOutlineStar} boxSize="0.9em" mt={"1px"} />
<Box as="span" ml="1" fontSize="sm">
{stars}
</Box>
</Flex>
</Flex>
<Flex justifyContent={"space-between"} width="100%">
<Box>
<HStack spacing="1">
{technologies.map(tech => (
<Tag size="sm" colorScheme={getTagColor(tech)}>
<Text fontSize={["0.55rem", "inherit", "inherit"]}>
{tech}
</Text>
</Tag>
))}
</HStack>
</Box>
</Flex>
{/* <Flex justifyContent={"space-between"} width="100%">
<Flex>
<AiOutlineStar color="teal.300" />
<Box as="span" ml="1" fontSize="sm">
{stars}
</Box>
</Flex>
<Box >
<Text
fontSize="xs"
fontWeight="400"
color={useColorModeValue("gray.400", "gray.500")}
>
{created}
</Text>
</Box>
</Flex> */}
</VStack>
</VStack>
<Modal isOpen={isOpen} onClose={onClose} isCentered allowPinchZoom>
<ModalOverlay />
<ModalContent bg="none" maxW={"28rem"} w="auto">
<ModalBody p={0} rounded="lg" overflow="hidden" bg="none">
<Center>
<Image src={cover} rounded="lg" />
{/* {type == "image" ? (
<Image src={cover} rounded="lg" />
) : (
<ReactPlayer url={link} controls playing />
)} */}
</Center>
</ModalBody>
</ModalContent>
</Modal>
</Box>
</CardTransition>
);
}
Example #7
| Source File: home.tsx From ledokku with MIT License | 4 votes |
|
Home = () => {
const toast = useToast();
const history = useHistory();
const { loggedIn, login } = useAuth();
const { data, loading, error } = useSetupQuery({});
const [
registerGithubAppMutation,
{ loading: registerGithubAppLoading },
] = useRegisterGithubAppMutation();
const [
loginWithGithubMutation,
{ loading: loginWithGithubLoading },
] = useLoginWithGithubMutation();
const [showAppSuccessAlert, setShowAppSuccessAlert] = useState(false);
// On mount we check if there is a github code present
useEffect(() => {
const codeToLogin = async () => {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const githubCode = urlParams.get('code');
const githubState = urlParams.get('state');
// In case of login state is empty
if (githubState === 'github_login' && githubCode) {
// Remove hash in url
window.history.replaceState({}, document.title, '.');
try {
const data = await loginWithGithubMutation({
variables: { code: githubCode },
});
if (data.data?.loginWithGithub) {
login(data.data.loginWithGithub.token);
history.push('/dashboard');
}
} catch (error) {
toast.error(error.message);
}
return;
}
if (githubState === 'github_application_setup' && githubCode) {
// Remove hash in url
window.history.replaceState({}, document.title, '.');
try {
const data = await registerGithubAppMutation({
variables: { code: githubCode },
update: (cache, { data }) => {
cache.modify({
fields: {
setup: (existingSetup) => {
if (data?.registerGithubApp?.githubAppClientId) {
// Change the local cache so we don't have to call the server again
const newSetup = {
...existingSetup,
isGithubAppSetup: true,
};
return newSetup;
}
return existingSetup;
},
},
});
},
});
if (data.data?.registerGithubApp?.githubAppClientId) {
// Manually set the config so we don't have to reload the page
config.githubClientId =
data.data?.registerGithubApp?.githubAppClientId;
setShowAppSuccessAlert(true);
}
} catch (error) {
toast.error(error.message);
}
}
};
codeToLogin();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleLogin = () => {
// The redirect_uri parameter should only be used on production,
// on dev env we force the redirection to localhost
window.location.replace(
`https://github.com/login/oauth/authorize?client_id=${config.githubClientId}&state=github_login`
);
};
// We check if the user is connected, if yes we need to redirect him to the dashboard
if (loggedIn) {
return <Redirect to="dashboard" />;
}
return (
<Container maxW="5xl">
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
minHeight="100vh"
>
<Heading as="h2" size="lg">
Ledokku
</Heading>
{error && (
<Text mt={4} color="red.500">
{error.message}
</Text>
)}
{(loading || registerGithubAppLoading || loginWithGithubLoading) && (
<Spinner mt={4} />
)}
{data?.setup.canConnectSsh === false && (
<>
<Text mt={4}>
In order to setup the ssh connection, run the following command on
your Dokku server.
</Text>
<Terminal wordBreak="break-all">
{`echo "${data.setup.sshPublicKey}" | dokku ssh-keys:add ledokku`}
</Terminal>
<Text mt={3}>Once you are done, just refresh this page.</Text>
</>
)}
{data?.setup.canConnectSsh === true &&
data?.setup.isGithubAppSetup === false &&
!registerGithubAppLoading && (
<Box
maxWidth="xl"
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Text mt={4} textAlign="center">
In order to be able to login and interact with the Github API,
let's create a new Github Application.
</Text>
<form
action="https://github.com/settings/apps/new?state=github_application_setup"
method="post"
>
<input
type="text"
name="manifest"
id="manifest"
defaultValue={data.setup.githubAppManifest}
style={{ display: 'none' }}
/>
<Button
mt={4}
colorScheme="gray"
type="submit"
leftIcon={<FiGithub size={18} />}
size="lg"
>
Create Github Application
</Button>
</form>
</Box>
)}
{data?.setup.canConnectSsh === true &&
data?.setup.isGithubAppSetup === true &&
!loginWithGithubLoading && (
<Box
maxWidth="2xl"
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
{showAppSuccessAlert ? (
<Alert
mt={4}
status="success"
variant="top-accent"
flexDirection="column"
alignItems="flex-start"
borderBottomRadius="base"
boxShadow="md"
>
<AlertTitle mr={2}>
Github application successfully created
</AlertTitle>
<AlertDescription>
You can now login to create your first user.
</AlertDescription>
</Alert>
) : null}
<Button
mt={4}
colorScheme="gray"
onClick={handleLogin}
leftIcon={<FiGithub size={18} />}
size="lg"
>
Log in with Github
</Button>
</Box>
)}
</Box>
</Container>
);
}
