react-icons/ai#AiOutlineClose TypeScript Examples
The following examples show how to use
react-icons/ai#AiOutlineClose.
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: Shop.tsx From app with MIT License | 5 votes |
|
Content = (props: Props) => {
const mapNode = React.useRef<HTMLDivElement>(null);
const [map, setMap] = React.useState<any>(null)
const { shop } = props
const clickHandler = () => {
props.close()
if(mapNode.current) {
mapNode.current.remove()
map.remove()
}
}
React.useEffect(() => {
if (!mapNode.current) {
return
}
// @ts-ignore
const nextMap = new window.geolonia.Map({
container: mapNode.current,
interactive: false,
zoom: 14,
});
setMap(nextMap)
}, [shop, mapNode])
const distanceTipText = makeDistanceLabelText(shop.distance)
return (
<div className="shop-single">
<div className="head">
<button onClick={clickHandler}><AiOutlineClose size="16px" color="#FFFFFF" /> 閉じる</button>
</div>
<div className="container">
{shop?
<>
<h2>{shop['店名']}</h2>
<div>
<span className="nowrap"><span className="category">{shop['ジャンル']}</span></span>
<span className="nowrap">{distanceTipText && <span className="distance">現在位置から {distanceTipText}</span> }</span>
</div>
<div style={{margin: "24px 0"}}><Links data={shop} /></div>
<p style={{margin: "24px 0"}}>{shop['紹介文']}</p>
<ShopMeta shop={shop} />
<div
ref={mapNode}
style={{width: '100%', height: '200px', marginTop: "24px"}}
data-lat={shop['緯度']}
data-lng={shop['経度']}
data-navigation-control="off"
></div>
<p><a className="small" href={`http://maps.apple.com/?q=${shop['緯度']},${shop['経度']}`}>お店までの道順</a></p>
</>
:
<></>
}
</div>
</div>
);
}
Example #2
| Source File: AppNavbar.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
AppNavbar: FC<AppNavbarProps> = ({ projectName, wide }) => {
const router = useRouter();
const { projectID } = useProjectConfig();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const toggleMenu = () => setIsMenuCollapsed(!isMenuCollapsed);
const links: [string, string][] = [
['Strona główna', '/'],
];
if (isFeatureFlagEnabled(publicRuntimeConfig.SHOW_LINKS_TO_APP))
links.push(['Szkoły', `/${projectID}/search`]);
links.concat([
['Kalkulator punktów', '/calculator'],
])
const getLinkClassName = (href: string) => {
return router.pathname === href ? 'font-bold' : '';
};
return (
<div className="fixed top-0 left-0 w-full z-99999 bg-white border-b border-lighten font-primary h-navbarHeight flex items-center">
<div
className={`${
wide ? 'w-wideContainer' : 'w-container'
} mx-auto lg:flex justify-between items-center py-3`}
>
<div className="relative flex items-center justify-between">
<Link href="/">
<a className="flex items-center">
<Brand projectName={projectName} className="font-bold text-xl" />
<span className="ml-2 rounded-full bg-primaryBg text-primary uppercase px-2 py-1 text-xs font-bold">
Beta
</span>
</a>
</Link>
<button className="text-xl lg:hidden" onClick={toggleMenu} type="button">
{isMenuCollapsed ? <AiOutlineClose /> : <AiOutlineMenu />}
</button>
</div>
<div
className={`lg:flex items-center absolute z-10 top-navbarHeight bg-white w-container lg:w-auto pb-3 lg:pb-0 lg:static ${
!isMenuCollapsed && 'hidden'
}`}
>
<ul className="lg:flex lg:mr-8">
{links.map(([text, href]) => (
<li key={href} className="lg:mx-4 my-4 lg:my-0">
<Link href={href}>
<a className={getLinkClassName(href)}>{text}</a>
</Link>
</li>
))}
</ul>
<Link href="/#support-us">
<a
className={[
'font-bold cursor-pointer inline-block w-full sm:w-auto text-center',
roundedSmallLinkClassName,
'',
].join(' ')}
>
Wesprzyj projekt
</a>
</Link>
</div>
</div>
</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>
</>
);
}
