62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
import {
|
||
|
|
Alert,
|
||
|
|
AlertIcon,
|
||
|
|
CloseButton,
|
||
|
|
Text,
|
||
|
|
Link,
|
||
|
|
HStack,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
|
||
|
|
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||
|
|
|
||
|
|
const CLOSED_KEY = "discord-notif-closed";
|
||
|
|
|
||
|
|
function NotificationBar() {
|
||
|
|
const isClosed = localStorage.getItem(CLOSED_KEY);
|
||
|
|
|
||
|
|
const [isVisible, setIsVisible] = useState(
|
||
|
|
isClosed === "true" ? false : true
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isVisible) {
|
||
|
|
localStorage.setItem(CLOSED_KEY, "true");
|
||
|
|
}
|
||
|
|
}, [isVisible]);
|
||
|
|
|
||
|
|
return isVisible ? (
|
||
|
|
<Alert status="info">
|
||
|
|
<AlertIcon />
|
||
|
|
<HStack flex={1}>
|
||
|
|
<Text>Share feature requests, report bugs and be the first to</Text>{" "}
|
||
|
|
<Text fontWeight={"semibold"}>try beta versions</Text>
|
||
|
|
<Text> by joining us on</Text>
|
||
|
|
<Link
|
||
|
|
href={"https://discord.gg/4VTnuVzfmm"}
|
||
|
|
color="cyan.300"
|
||
|
|
isExternal
|
||
|
|
>
|
||
|
|
<HStack>
|
||
|
|
<FontAwesomeIcon icon={faDiscord} size="1x" />
|
||
|
|
<Text>Discord</Text>
|
||
|
|
<ExternalLinkIcon />
|
||
|
|
</HStack>
|
||
|
|
</Link>
|
||
|
|
</HStack>
|
||
|
|
<CloseButton
|
||
|
|
alignSelf="flex-start"
|
||
|
|
position="relative"
|
||
|
|
right={-1}
|
||
|
|
top={-1}
|
||
|
|
onClick={() => setIsVisible(false)}
|
||
|
|
/>
|
||
|
|
</Alert>
|
||
|
|
) : (
|
||
|
|
<></>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NotificationBar;
|