mirror of https://github.com/sunface/rust-course
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.2 KiB
41 lines
1.2 KiB
4 years ago
|
import React from "react"
|
||
|
|
import { Box, BoxProps, Flex, useColorModeValue ,Text, Link, HStack} from "@chakra-ui/react"
|
||
|
|
import { FaGithub, FaGlobeAsia, FaGreaterThan, FaLink, FaLocationArrow, FaTwitter } from "react-icons/fa"
|
||
|
|
import userCustomTheme from "theme/user-custom"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
type: string
|
||
|
|
url: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const WebsiteLink = ({type, url,...rest}: Props) => {
|
||
|
|
let icon0
|
||
|
|
let title
|
||
|
|
switch (type) {
|
||
|
|
case "github":
|
||
|
|
title= "Github"
|
||
|
|
icon0 = <FaGithub />
|
||
|
|
break;
|
||
|
|
case "twitter":
|
||
|
|
title = "Twitter"
|
||
|
|
icon0 = <FaTwitter />
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
title = "Official website"
|
||
|
|
icon0 = <FaGlobeAsia />
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Flex justifyContent="space-between" alignItems="center" cursor="pointer" as="a" href={url} target="_blank" py="1" px="2" layerStyle="textSecondary" fontSize="1.1rem" {...rest} _hover={{bg: useColorModeValue(userCustomTheme.hoverBg.light,userCustomTheme.hoverBg.dark)}}>
|
||
|
|
<HStack>
|
||
|
|
{icon0}
|
||
|
|
<Text ml="2">{title}</Text>
|
||
|
|
</HStack>
|
||
|
|
|
||
|
|
<FaLocationArrow fontSize="13px" />
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WebsiteLink
|