Use ts(x) instead of js

CodeForAfrica · Sep 2, 2024 · 78fe1bb · 78fe1bb
1 parent cc3bd6a
commit 78fe1bb
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 174 deletions.
diff --git a/apps/engineeringblog/app/StyledRoot.tsx b/apps/engineeringblog/app/StyledRoot.tsx
diff --git 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 (
     <html lang="en">
       <body>
         <AppRouterCacheProvider>
-          <StyledRoot>
-            <Navbar />
+          <ThemeProvider theme={theme}>
+            <CssBaseline enableColorScheme />
+            <NavBar logo={logo} />
             {children}
-          </StyledRoot>
+          </ThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

diff --git a/apps/engineeringblog/components/Logo/Logo.js b/apps/engineeringblog/components/Logo/Logo.js
diff --git a/apps/engineeringblog/components/Logo/Logo.tsx 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<Theme>;
+  title?: string;
+}
+
+const Logo = React.forwardRef(function Logo(
+  props: LogoProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    alt,
+    href: hrefProp,
+    src,
+    sx,
+    title,
+    ...other // All next/image supported props
+  } = props;
+  const logoHref = title?.length ? "https://codeforafrica.org" : "/";
+
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        color: "inherit",
+        alignItems: "center",
+        position: "relative",
+        ...sx,
+      }}
+      ref={ref}
+    >
+      <Link
+        color="inherit"
+        href={logoHref}
+        sx={(theme) => ({
+          "&>svg,&>img": {
+            transition: theme.transitions.create(["opacity", "transform"]),
+          },
+          "&:hover": {
+            "&>svg,&>img": {
+              opacity: 0.65,
+            },
+            "&>svg": {
+              transform: "translateX(-5px)",
+            },
+          },
+        })}
+      >
+        {title?.length ? (
+          <SvgIcon
+            sx={(theme) => ({
+              fill: { xs: "none" },
+              fontSize: 32,
+              left: -24,
+              opacity: 0,
+              position: "absolute",
+              right: 0,
+            })}
+          >
+            <PreviousIcon />
+          </SvgIcon>
+        ) : null}
+        <Image
+          {...other}
+          alt={alt}
+          priority
+          src={src}
+          style={{
+            height: 32,
+            width: "auto",
+          }}
+        />
+      </Link>
+      {title?.length ? (
+        <Link
+          color="text.primary"
+          href="/"
+          textTransform="uppercase"
+          typography="h4"
+          underline="none"
+          sx={({ transitions, typography }) => ({
+            display: "flex",
+            fontFamily: typography.fontFamilyMono,
+            transition: transitions.create(["opacity", "transform"]),
+            "&:hover": {
+              opacity: 0.65,
+            },
+          })}
+        >
+          Technology
+        </Link>
+      ) : null}
+    </Stack>
+  );
+});
+
+export default Logo;
diff --git a/apps/engineeringblog/components/Logo/index.js b/apps/engineeringblog/components/Logo/index.js
diff --git a/apps/engineeringblog/components/Logo/index.ts 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/...components/DesktopNavBar/DesktopNavBar.js → ...ts/NavBar/DesktopNavBar/DesktopNavBar.tsx b/...components/DesktopNavBar/DesktopNavBar.js → ...ts/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<HTMLDivElement>,
+) {
   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/...ingblog/components/DesktopNavBar/index.js → .../components/NavBar/DesktopNavBar/index.ts b/...ingblog/components/DesktopNavBar/index.js → .../components/NavBar/DesktopNavBar/index.ts
diff --git a/...g/components/MobileNavBar/MobileNavBar.js → ...ents/NavBar/MobileNavBar/MobileNavBar.tsx b/...g/components/MobileNavBar/MobileNavBar.js → ...ents/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 <Slide direction="up" ref={ref} {...props} />;
 });
 
-const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
+const MobileNavBar = React.forwardRef(function MobileNavBar(
+  props: NavBarProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
   const { logo, sx } = props;
   const [open, setOpen] = React.useState(false);
 
@@ -88,23 +97,11 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
               justifyContent: "space-between",
               alignItems: "flex-start",
             }}
-            onClose={handleClose}
           ></DialogContent>
         </DialogContainer>
       </Grid>
     </Grid>
   );
 });
 
-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/...ringblog/components/MobileNavBar/index.js → ...g/components/NavBar/MobileNavBar/index.ts b/...ringblog/components/MobileNavBar/index.js → ...g/components/NavBar/MobileNavBar/index.ts
diff --git a/apps/engineeringblog/components/NavBar/NavBar.js b/apps/engineeringblog/components/NavBar/NavBar.js