Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 608x 608x 841x 841x 2781x 841x 1x 1x 841x 841x 841x 841x 1x 1x 1x 1x 608x 608x 1x 1x | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import styled from "styled-components";
import { config } from "shared/config";
import { AppRoute } from "client/app/routes";
import { LanguageSelector } from "client/components/LanguageSelector";
import KonstiLogo from "client/components/icons/konsti.svg";
import { isMainEventProgramVisible } from "client/utils/getUpcomingProgramItems";
import { useAppSelector } from "client/utils/hooks";
import { useTimeNow } from "client/utils/useTimeNow";
import { Navigation } from "./Navigation";
export const HEADER_HEIGHT = 40;
export const Header = (): ReactElement => {
const { t } = useTranslation();
const { eventName, eventYear } = config.event();
const appOpen = useAppSelector((state) => state.admin.appOpen);
// During pre-convention week the title shows the pre-convention week program is on
const appDescriptionKey = isMainEventProgramVisible(useTimeNow())
? "appDescription"
: "appDescriptionPreConventionWeek";
return (
<>
<HeaderContainer>
<Navigation />
<HeaderTitle>
<KonstiIcon aria-label={t("logoAltText")} />
{t(appDescriptionKey, {
EVENT_NAME: eventName,
EVENT_YEAR: eventYear,
})}
</HeaderTitle>
<HeaderRightSideContainer>
<StyledLink
to={AppRoute.ABOUT}
aria-label={t("iconAltText.aboutKonsti")}
>
<LinkIcon icon="circle-question" aria-hidden="true" />
</StyledLink>
<HeaderLanguageSelector />
</HeaderRightSideContainer>
</HeaderContainer>
{!appOpen && <ClosingMessage>{t("closingMessage")}</ClosingMessage>}
</>
);
};
const HeaderLanguageSelector = styled(LanguageSelector)`
margin: 8px;
`;
const HeaderContainer = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
background: ${(props) => props.theme.backgroundHeader};
border-bottom: 1px solid ${(props) => props.theme.borderHeader};
box-shadow: ${(props) => props.theme.shadowHeader};
margin-bottom: 8px;
color: ${(props) => props.theme.textLighter};
width: 100%;
height: ${HEADER_HEIGHT}px;
`;
const HeaderTitle = styled.div`
display: flex;
flex: 0 1 auto;
align-items: center;
text-align: center;
margin: 4px 8px 4px 8px;
`;
const ClosingMessage = styled.h2`
text-align: center;
`;
const StyledLink = styled(Link)`
margin-right: 12px;
`;
const LinkIcon = styled(FontAwesomeIcon)`
cursor: pointer;
font-size: ${(props) => props.theme.fontSizeLarge};
vertical-align: middle;
margin-bottom: 1px;
color: ${(props) => props.theme.iconDefault};
`;
const HeaderRightSideContainer = styled.div`
display: flex;
align-items: center;
white-space: nowrap;
margin-right: 8px;
`;
const KonstiIcon = styled(KonstiLogo)`
width: 24px;
height: 24px;
vertical-align: middle;
padding-right: 8px;
`;
|