Header UI Development

Author of this section: @Fish

in this talk, let's implement the UI of the Layout header of Wtfswap.

The design draft is as follows:

the style is relatively simple. On the right side, we can use Ant Design Web3 ConnectButton components, other parts can directly use some styles, styles we are based on CSSModules to write, NextJS default support, and better understanding, more suitable for use in the course. Of course, you can also use it according to your needs in actual projects. Other programs .

We newly built components/WtfLayout/styles.module.css and initialize the partial contents:

.header {
  .title {
  }
  .nav {
  }
}

we will add relevant contents later and revise them before that. Header.tsx :

import Link from "next/link";
import { ConnectButton } from "@ant-design/web3";
import styles from "./styles.module.css";

export default function WtfHeader() {
  return (
    <div className={styles.header}>
      <div className={styles.title}>WTFSwap</div>
      <div className={styles.nav}>
        <Link href="/wtfswap">Swap</Link>
        <Link href="/wtfswap/pool">Pool</Link>
      </div>
      <div>
        <ConnectButton type="text" />
      </div>
    </div>
  );
}

I used it here Link component to achieve the page jump. Also introduced ConnectButton component and sets type for textTo match the style of the design.

Next we continue to improve styles.module.csss styles in:

.header {
  height: 56px;
  line-height: 56px;
  padding-inline: 24px;
  background-color: #e8f1ff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #d7e1eb;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 64px;
}

.nav a {
  font-size: 14px;
  opacity: 0.65;
}

next, we need to highlight the navigation style corresponding to the current page. First, we need to highlight Link component Add Previous className :

import Link from "next/link";
+ import { usePathname } from "next/navigation";
import { ConnectButton } from "@ant-design/web3";
import styles from "./styles.module.css";

export default function WtfHeader() {
+  const pathname = usePathname();
+  const isSwapPage = pathname === "/wtfswap";

  return (
    <div className={styles.header}>
      <div className={styles.title}>WTFSwap</div>
      <div className={styles.nav}>
        <Link
          href="/wtfswap"
+          className={isSwapPage ? styles.active : undefined}
        >
          Swap
        </Link>
        <Link
          href="/wtfswap/pool"
+          className={!isSwapPage ? styles.active : undefined}
        >
          Pool
        </Link>
      </div>
      <div>
        <ConnectButton type="text" />
      </div>
    </div>
  );
}

then add the relevant styles:

.nav a.active {
  font-weight: bold;
  opacity: 1;
}

in addition to the head style, we add the background color of the layout. Modification WtfLayout/index.tsx as follows:

import React from "react";
import Header from "./Header";
+ import styles from "./styles.module.css";

interface WtfLayoutProps {
  children: React.ReactNode;
}

const WtfLayout: React.FC<WtfLayoutProps> = ({ children }) => {
  return (
-    <div>
+    <div className={styles.layout}>
      <Header />
      {children}
    </div>
  );
};

export default WtfLayout;

then in styles.module.css add:

min-height: 100vh;
background: linear-gradient(to bottom, #e8f1ff, #f6f7f9);

at this point, we have completed the UI style of the layout head.