feat: Add head ui

P202_HeadUI/code/Header.tsx

@@ -0,0 +1,32 @@
+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>
+  );
+}

P202_HeadUI/code/styles.module.css

@@ -0,0 +1,29 @@
+.header {
+  height: 56px;
+  line-height: 56px;
+  padding-inline: 24px;
+  background-color: #e8f1ff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.nav {
+  display: flex;
+  gap: 64px;
+}
+
+.nav a {
+  font-size: 14px;
+  opacity: 0.65;
+}
+
+.nav a.active {
+  font-weight: bold;
+  opacity: 1;
+}

P202_HeadUI/readme.md

@@ -0,0 +1,122 @@
+这一讲，我们来实现 Wtfswap 的 Layout 头部部分的 UI。
+
+---
+
+设计稿如下所示：
+
+![headui](./img/ui.png)
+
+样式比较简单，右侧我们可以使用 Ant Design Web3 的 [ConnectButton](https://web3.ant.design/components/connect-button) 组件，其它部分可以直接用写样式，样式我们基于 [CSSModules](https://nextjs.org/docs/app/building-your-application/styling/css-modules#css-modules) 来写，NextJS 默认支持，而且更好理解，比较适合课程中使用。当然实际项目中你也可以按照你的需求使用[其它方案](https://nextjs.org/docs/app/building-your-application/styling)。
+
+我们新建 `components/WtfLayout/styles.module.css`，并初始化部分内容：
+
+```css
+.header {
+  .title {
+  }
+  .nav {
+  }
+}
+```
+
+稍后我们再来补充相关内容，在这之前先修改 `Header.tsx`：
+
+```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>
+  );
+}
+```
+
+这里用了 [Link](https://nextjs.org/learn-pages-router/basics/navigate-between-pages/link-component) 组件来实现页面的跳转。另外引入了 [ConnectButton](https://web3.ant.design/components/connect-button) 组件，并设置了 `type` 为 `text`，以匹配设计稿的样式。
+
+接下来我们继续完善 `styles.module.csss` 中的样式：
+
+```css
+.header {
+  height: 56px;
+  line-height: 56px;
+  padding-inline: 24px;
+  background-color: #e8f1ff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.nav {
+  display: flex;
+  gap: 64px;
+}
+
+.nav a {
+  font-size: 14px;
+  opacity: 0.65;
+}
+```
+
+接下来我们还要实现高亮当前页面对应的导航的样式，首先我们需要把要高亮的 `Link` 组件添加上一个 `className`：
+
+```diff
+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>
+  );
+}
+```
+
+然后添加相关样式：
+
+```css
+.nav a.active {
+  font-weight: bold;
+  opacity: 1;
+}
+```
+
+至此，布局头部的 UI 样式我们就完成了。

README.md

@@ -58,7 +58,7 @@ WTF Dapp 是一个 DApp 极简入门教程，帮助开发者入门去中心应
 
 **第 P201 讲：初始化前端代码和技术分析**：[教程](./P201_InitFrontend/readme.md) | [代码](./P201_InitFrontend/code/)
 
-**第 P202 讲：头部 UI 开发**
+**第 P202 讲：头部 UI 开发**：[教程](./P202_HeadUI/readme.md) | [代码](./P202_HeadUI/code/)
 
 **第 P203 讲：支持连接链**
 

demo/components/WtfLayout/Header.tsx

@@ -1,3 +1,32 @@
+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() {
-  return <div>WtfHeader</div>;
+  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>
+  );
 }

demo/components/WtfLayout/styles.module.css

@@ -0,0 +1,29 @@
+.header {
+  height: 56px;
+  line-height: 56px;
+  padding-inline: 24px;
+  background-color: #e8f1ff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.nav {
+  display: flex;
+  gap: 64px;
+}
+
+.nav a {
+  font-size: 14px;
+  opacity: 0.65;
+}
+
+.nav a.active {
+  font-weight: bold;
+  opacity: 1;
+}