-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0238381
commit ad26c94
Showing
27 changed files
with
761 additions
and
802 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { | ||
| CloseOutlined as CloseIcon, | ||
| DarkModeOutlined, | ||
| LightModeOutlined, | ||
| DragHandleOutlined as MenuIcon, | ||
| LaunchOutlined as OpenIcon, | ||
| } from "@mui/icons-material"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Fade, | ||
| IconButton, | ||
| Stack, | ||
| Typography, | ||
| useScrollTrigger, | ||
| } from "@mui/material"; | ||
| import PopupState, { bindTrigger } from "material-ui-popup-state"; | ||
| import { createPortal } from "react-dom"; | ||
| import l10n from "../pages/en-au.json"; | ||
| import { space } from "../pages/space"; | ||
| import { Logo } from "./Logo"; | ||
| import { useMode } from "./ModeContext"; | ||
| import { usePaper } from "./theme"; | ||
| import { useSm } from "./useSm"; | ||
|
|
||
| export function AppBar() { | ||
| const [mode, setMode] = useMode(); | ||
| const sm = useSm(); | ||
| const paper = usePaper(); | ||
| const top = useScrollTrigger({ threshold: 0, disableHysteresis: true }); | ||
| const menu = l10n.sections.map(({ url, label }) => ( | ||
| <Button | ||
| sx={{ py: 1.5, px: 2, borderRadius: 32 }} | ||
| onClick={() => (location.href = url)} | ||
| > | ||
| <Typography color="text.primary" variant="button"> | ||
| {label} | ||
| </Typography> | ||
| </Button> | ||
| )); | ||
| const openPosthoc = ( | ||
| <Button | ||
| startIcon={<OpenIcon sx={{ color: "primary.main" }} />} | ||
| sx={{ py: 1.5, px: 2, borderRadius: 32 }} | ||
| onClick={() => window.open(l10n.appUrl)} | ||
| > | ||
| <Typography color="text.primary" variant="button"> | ||
| {l10n.openAppLabel} | ||
| </Typography> | ||
| </Button> | ||
| ); | ||
| const darkToggle = ( | ||
| <IconButton | ||
| sx={{ color: "text.primary" }} | ||
| onClick={() => setMode(mode === "dark" ? "light" : "dark")} | ||
| > | ||
| {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />} | ||
| </IconButton> | ||
| ); | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| width: "100vw", | ||
| position: "fixed", | ||
| px: 2, | ||
| zIndex: (t) => t.zIndex.appBar, | ||
| }} | ||
| > | ||
| <Fade in> | ||
| <Stack | ||
| gap={1} | ||
| alignItems="center" | ||
| direction="row" | ||
| sx={{ | ||
| p: 2, | ||
| mx: "auto", | ||
| mt: sm ? 2 : 4, | ||
| ...(top ? paper(1) : {}), | ||
| width: 1000 + 8 * 4, | ||
| maxWidth: "100%", | ||
| height: 64, | ||
| borderRadius: 32, | ||
| }} | ||
| > | ||
| <Box sx={{ mr: 2, height: 32, minWidth: 32 }}> | ||
| <Logo /> | ||
| </Box> | ||
| {sm ? ( | ||
| <> | ||
| <Box sx={{ flex: 1 }}></Box> | ||
| {openPosthoc} | ||
| <PopupState variant="popover"> | ||
| {(state) => ( | ||
| <> | ||
| <IconButton {...bindTrigger(state)}> | ||
| <MenuIcon /> | ||
| </IconButton> | ||
| {createPortal( | ||
| <Box | ||
| sx={{ | ||
| ...(state.isOpen | ||
| ? { opacity: 1 } | ||
| : { | ||
| opacity: 0, | ||
| pointerEvents: "none", | ||
| }), | ||
| ...paper(0), | ||
| transition: (t) => | ||
| t.transitions.create([ | ||
| "opacity", | ||
| "backdrop-filter", | ||
| ]), | ||
| position: "fixed", | ||
| zIndex: (t) => t.zIndex.modal, | ||
| top: 0, | ||
| left: 0, | ||
| width: "100vw", | ||
| height: "100vh", | ||
| borderRadius: 0, | ||
| }} | ||
| > | ||
| <Stack gap={4} p={3.5} alignItems="flex-end"> | ||
| <IconButton onClick={state.close}> | ||
| <CloseIcon /> | ||
| </IconButton> | ||
| {darkToggle} | ||
| {menu} | ||
| {openPosthoc} | ||
| </Stack> | ||
| </Box>, | ||
| document.body | ||
| )} | ||
| </> | ||
| )} | ||
| </PopupState> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {menu} | ||
| {space()} | ||
| {openPosthoc} | ||
| {darkToggle} | ||
| </> | ||
| )} | ||
| </Stack> | ||
| </Fade> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Box, Stack, StackProps, Typography } from "@mui/material"; | ||
| import { ReactNode as RN } from "react"; | ||
| import { usePaper } from "./theme"; | ||
|
|
||
| export function Card({ | ||
| image, | ||
| title, | ||
| subtitle, | ||
| ...props | ||
| }: { | ||
| image?: RN; | ||
| title?: RN; | ||
| subtitle?: RN; | ||
| } & Omit<StackProps, "title">) { | ||
| const paper = usePaper(); | ||
| return ( | ||
| <Stack | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| gap={1} | ||
| {...props} | ||
| sx={{ ...paper(1), p: 8, textAlign: "center", ...props.sx } as any} | ||
| > | ||
| {image ?? <Box height={64}></Box>} | ||
| <Typography variant="h3">{title ?? "Title"}</Typography> | ||
| <Typography variant="subtitle2">{subtitle ?? "Subtitle"}</Typography> | ||
| </Stack> | ||
| ); | ||
| } |
Oops, something went wrong.