diff --git a/apps/engineeringblog/app/StyledRoot.tsx b/apps/engineeringblog/app/StyledRoot.tsx deleted file mode 100644 index c86e74e25..000000000 --- a/apps/engineeringblog/app/StyledRoot.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; -import { ThemeProvider } from "@mui/material/styles"; -import theme from "@/engineeringblog/theme"; -import { CssBaseline } from "@mui/material"; - -export default function StyledRoot({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - ); -} diff --git a/apps/engineeringblog/app/layout.tsx b/apps/engineeringblog/app/layout.tsx index 636aa7f3b..32ce49b59 100644 --- a/apps/engineeringblog/app/layout.tsx +++ b/apps/engineeringblog/app/layout.tsx @@ -1,7 +1,12 @@ -import type { Metadata } from "next"; -import Navbar from "@/engineeringblog/components/Navbar"; +import { CssBaseline, ThemeProvider } from "@mui/material"; import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter"; -import StyledRoot from "./StyledRoot"; +import type { Metadata } from "next"; + +import NavBar from "@/engineeringblog/components/NavBar"; +import theme from "@/engineeringblog/theme"; + +// TODO: blurWidth/blueHeight https://github.com/vercel/next.js/issues/56511 +import logoLight from "@/engineeringblog/assets/images/logo-light.png"; export const metadata: Metadata = { title: "Technology | Code for Africa", @@ -14,14 +19,21 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const logo = { + ...logoLight, + alt: "Technology | Code for Africa", + title: "Technology", + }; + return ( - - + + + {children} - + diff --git a/apps/engineeringblog/components/Logo/Logo.js b/apps/engineeringblog/components/Logo/Logo.js deleted file mode 100644 index 1df7cbec9..000000000 --- a/apps/engineeringblog/components/Logo/Logo.js +++ /dev/null @@ -1,40 +0,0 @@ -import { ImageButton } from "@commons-ui/core"; -import { Divider, Link, Stack } from "@mui/material"; -import PropTypes from "prop-types"; -import React from "react"; - -const Logo = React.forwardRef(function Logo(props, ref) { - const { - alt = "Technology | Code for Africa", - href = "https://codeforafrica.org", - src, - ...other - } = props; - return ( - - - ({ fontFamily: typography.fontFamilyMono })} - > - Technology - - - ); -}); - -Logo.propTypes = { - src: PropTypes.string, -}; - -export default Logo; diff --git a/apps/engineeringblog/components/Logo/Logo.tsx b/apps/engineeringblog/components/Logo/Logo.tsx new file mode 100644 index 000000000..2f44cdc06 --- /dev/null +++ b/apps/engineeringblog/components/Logo/Logo.tsx @@ -0,0 +1,105 @@ +import { Link, Stack, SvgIcon } from "@mui/material"; +import { SxProps, Theme } from "@mui/material/styles"; +import Image, { ImageProps } from "next/image"; +import React from "react"; + +import PreviousIcon from "@/engineeringblog/assets/icons/Type=chevron-left, Size=24, Color=CurrentColor.svg"; + +export interface LogoProps extends ImageProps { + href?: string; + sx?: SxProps; + title?: string; +} + +const Logo = React.forwardRef(function Logo( + props: LogoProps, + ref: React.ForwardedRef, +) { + const { + alt, + href: hrefProp, + src, + sx, + title, + ...other // All next/image supported props + } = props; + const logoHref = title?.length ? "https://codeforafrica.org" : "/"; + + return ( + + ({ + "&>svg,&>img": { + transition: theme.transitions.create(["opacity", "transform"]), + }, + "&:hover": { + "&>svg,&>img": { + opacity: 0.65, + }, + "&>svg": { + transform: "translateX(-5px)", + }, + }, + })} + > + {title?.length ? ( + ({ + fill: { xs: "none" }, + fontSize: 32, + left: -24, + opacity: 0, + position: "absolute", + right: 0, + })} + > + + + ) : null} + {alt} + + {title?.length ? ( + ({ + display: "flex", + fontFamily: typography.fontFamilyMono, + transition: transitions.create(["opacity", "transform"]), + "&:hover": { + opacity: 0.65, + }, + })} + > + Technology + + ) : null} + + ); +}); + +export default Logo; diff --git a/apps/engineeringblog/components/Logo/index.js b/apps/engineeringblog/components/Logo/index.js deleted file mode 100644 index b7d6439c1..000000000 --- a/apps/engineeringblog/components/Logo/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Logo from "./Logo"; - -export default Logo; diff --git a/apps/engineeringblog/components/Logo/index.ts b/apps/engineeringblog/components/Logo/index.ts new file mode 100644 index 000000000..ef29c030a --- /dev/null +++ b/apps/engineeringblog/components/Logo/index.ts @@ -0,0 +1,5 @@ +import type { LogoProps } from "./Logo"; +import Logo from "./Logo"; + +export type { LogoProps }; +export default Logo; diff --git a/apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx similarity index 57% rename from apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js rename to apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx index d6f0443c3..1d7d74916 100644 --- a/apps/engineeringblog/components/DesktopNavBar/DesktopNavBar.js +++ b/apps/engineeringblog/components/NavBar/DesktopNavBar/DesktopNavBar.tsx @@ -1,10 +1,13 @@ import { Grid } from "@mui/material"; -import PropTypes from "prop-types"; import React from "react"; import Logo from "@/engineeringblog/components/Logo"; +import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps"; -const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) { +const DesktopNavBar = React.forwardRef(function DesktopNavBar( + props: NavBarProps, + ref: React.ForwardedRef, +) { const { logo, sx } = props; return ( @@ -22,14 +25,4 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) { ); }); -DesktopNavBar.propTypes = { - direction: PropTypes.string, - menu: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - href: PropTypes.string, - }), - ), -}; - export default DesktopNavBar; diff --git a/apps/engineeringblog/components/DesktopNavBar/index.js b/apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts similarity index 100% rename from apps/engineeringblog/components/DesktopNavBar/index.js rename to apps/engineeringblog/components/NavBar/DesktopNavBar/index.ts diff --git a/apps/engineeringblog/components/MobileNavBar/MobileNavBar.js b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx similarity index 84% rename from apps/engineeringblog/components/MobileNavBar/MobileNavBar.js rename to apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx index 9df1a5b24..52d0e2764 100644 --- a/apps/engineeringblog/components/MobileNavBar/MobileNavBar.js +++ b/apps/engineeringblog/components/NavBar/MobileNavBar/MobileNavBar.tsx @@ -4,12 +4,13 @@ import { Grid, IconButton, Slide, + SlideProps, SvgIcon, } from "@mui/material"; import { styled } from "@mui/material/styles"; -import PropTypes from "prop-types"; import React from "react"; +import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps"; import Logo from "@/engineeringblog/components/Logo"; import CloseIcon from "@/engineeringblog/assets/icons/Type=x, Size=24, Color=CurrentColor.svg"; import MenuIcon from "@/engineeringblog/assets/icons/Type=menu, Size=24, Color=CurrentColor.svg"; @@ -29,11 +30,19 @@ const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({ }, })); -const Transition = React.forwardRef(function Transition(props, ref) { +interface TransitionProps extends SlideProps {} + +const Transition = React.forwardRef(function Transition( + props: TransitionProps, + ref, +) { return ; }); -const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) { +const MobileNavBar = React.forwardRef(function MobileNavBar( + props: NavBarProps, + ref: React.ForwardedRef, +) { const { logo, sx } = props; const [open, setOpen] = React.useState(false); @@ -88,7 +97,6 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) { justifyContent: "space-between", alignItems: "flex-start", }} - onClose={handleClose} > @@ -96,15 +104,4 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) { ); }); -MobileNavBar.propTypes = { - direction: PropTypes.string, - logo: PropTypes.shape({}), - menus: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - href: PropTypes.string, - }), - ), -}; - export default MobileNavBar; diff --git a/apps/engineeringblog/components/MobileNavBar/index.js b/apps/engineeringblog/components/NavBar/MobileNavBar/index.ts similarity index 100% rename from apps/engineeringblog/components/MobileNavBar/index.js rename to apps/engineeringblog/components/NavBar/MobileNavBar/index.ts diff --git a/apps/engineeringblog/components/NavBar/NavBar.js b/apps/engineeringblog/components/NavBar/NavBar.js deleted file mode 100644 index d647da4f0..000000000 --- a/apps/engineeringblog/components/NavBar/NavBar.js +++ /dev/null @@ -1,78 +0,0 @@ -"use client"; - -import { NavBar as NavigationBar, Section } from "@commons-ui/core"; -import { alpha, useScrollTrigger, useTheme } from "@mui/material"; -import PropTypes from "prop-types"; -import React from "react"; - -import DesktopNavBar from "@/engineeringblog/components/DesktopNavBar"; -import MobileNavBar from "@/engineeringblog/components/MobileNavBar"; -import logoLight from "@/engineeringblog/assets/images/logo-light.png"; - -function ScrollStyle({ children, sx, ...other }) { - const theme = useTheme(); - const trigger = useScrollTrigger({ - disableHysteresis: true, - threshold: 0, - }); - - return React.cloneElement(children, { - ...other, - sx: trigger - ? { - ...sx, - backgroundColor: alpha(theme.palette.background.default, 0.9), - borderBottom: `1px solid ${theme.palette.divider}`, - } - : sx, - }); -} - -function NavBar({ logo: logoProp, menus, socialLinks }) { - const logo = logoProp || { height: 32, src: logoLight.src, width: 29.5 }; - - return ( - - -
- - -
- - - ); -} - -NavBar.propTypes = { - menus: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - href: PropTypes.string, - }), - ), -}; - -export default NavBar; diff --git a/apps/engineeringblog/components/NavBar/NavBar.tsx b/apps/engineeringblog/components/NavBar/NavBar.tsx new file mode 100644 index 000000000..56a5d281a --- /dev/null +++ b/apps/engineeringblog/components/NavBar/NavBar.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { NavBar as NavigationBar, Section } from "@commons-ui/core"; +import { + AppBarProps, + ToolbarProps, + alpha, + useScrollTrigger, + useTheme, +} from "@mui/material"; +import React from "react"; + +import type NavBarProps from "@/engineeringblog/components/NavBar/NavBarProps"; +import DesktopNavBar from "./DesktopNavBar"; +import MobileNavBar from "./MobileNavBar"; + +interface ScrollStyleProps extends AppBarProps { + ToolbarProps: ToolbarProps; + children: React.ReactElement; +} + +function ScrollStyle({ children, sx, ...other }: ScrollStyleProps) { + const theme = useTheme(); + const trigger = useScrollTrigger({ + disableHysteresis: true, + threshold: 0, + }); + + return children + ? React.cloneElement(children, { + ...other, + sx: trigger + ? { + ...sx, + backgroundColor: alpha(theme.palette.background.default, 0.9), + borderBottom: `1px solid ${theme.palette.divider}`, + } + : sx, + }) + : null; +} + +function NavBar({ logo }: NavBarProps) { + return ( + + +
+ + +
+ + + ); +} + +export default NavBar; diff --git a/apps/engineeringblog/components/NavBar/NavBarProps.tsx b/apps/engineeringblog/components/NavBar/NavBarProps.tsx new file mode 100644 index 000000000..9f626be59 --- /dev/null +++ b/apps/engineeringblog/components/NavBar/NavBarProps.tsx @@ -0,0 +1,9 @@ +import { Theme, SxProps } from "@mui/material/styles"; +import { LogoProps } from "@/engineeringblog/components/Logo"; + +interface NavBarProps { + logo: LogoProps; + sx?: SxProps; +} + +export default NavBarProps; diff --git a/apps/engineeringblog/components/NavBar/index.js b/apps/engineeringblog/components/NavBar/index.js deleted file mode 100644 index 085b6b525..000000000 --- a/apps/engineeringblog/components/NavBar/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import NavBar from "./NavBar"; - -export default NavBar; diff --git a/apps/engineeringblog/components/NavBar/index.ts b/apps/engineeringblog/components/NavBar/index.ts new file mode 100644 index 000000000..757a2207f --- /dev/null +++ b/apps/engineeringblog/components/NavBar/index.ts @@ -0,0 +1,5 @@ +import NavBar from "./NavBar"; +import type NavBarProps from "./NavBarProps"; + +export type { NavBarProps }; +export default NavBar; diff --git a/apps/engineeringblog/theme/index.ts b/apps/engineeringblog/theme/index.ts index 008438231..126bef355 100644 --- a/apps/engineeringblog/theme/index.ts +++ b/apps/engineeringblog/theme/index.ts @@ -1,3 +1,5 @@ +"use client"; + import { ThemeOptions, createTheme } from "@mui/material/styles"; import { deepmerge } from "@mui/utils"; diff --git a/apps/engineeringblog/types.d.ts b/apps/engineeringblog/types.d.ts new file mode 100644 index 000000000..33ce257b0 --- /dev/null +++ b/apps/engineeringblog/types.d.ts @@ -0,0 +1,2 @@ +declare module "@commons-ui/core"; +declare module "@commons-ui/next";