feat:debounce demo;icon

Author: LeeZ1Q

app/components/NavBar.js

@@ -1,62 +1,62 @@
-import Link from "next/link";
-import styles from "../styles/Nav.module.css";
-import ThemeToggle from "./ThemeToggle";
+import Link from 'next/link';
+import styles from '../styles/Nav.module.css';
+import ThemeToggle from './ThemeToggle';
 
 const NavBar = () => {
 	return (
 		<div className={styles.container}>
 			<Link
-				href="/"
+				href='/'
 				className={styles.signature}
 			>
 				Lee
 			</Link>
 			<nav className={styles.nav}>
 				{/* Mobile Icon */}
-				<Link href="/blog">
+				<Link href='/blog'>
 					<span className={`iconfont ${styles.mobile} ${styles.icon}`}>
 						&#xe634;
 					</span>
 				</Link>
-				<Link href="/project">
+				<Link href='/project'>
 					<span className={`iconfont ${styles.mobile} ${styles.icon}`}>
-						&#xe650;
+						&#xe8d9;
 					</span>
 				</Link>
 
 				{/* Laptop Link */}
 				<Link
-					href="/"
+					href='/'
 					className={`${styles.link} ${styles.laptop}`}
 				>
 					Me
 				</Link>
 				<Link
-					href="/blog"
+					href='/blog'
 					className={`${styles.link} ${styles.laptop}`}
 				>
 					Blog
 				</Link>
 				<Link
-					href="/project"
+					href='/project'
 					className={`${styles.link} ${styles.laptop}`}
 				>
 					Projects
 				</Link>
 
 				{/* Other Icon */}
 				<Link
-					href="https://github.com/LeeZ1Q"
-					rel="noreferrer"
-					target="_blank"
+					href='https://github.com/LeeZ1Q'
+					rel='noreferrer'
+					target='_blank'
 					className={`iconfont ${styles.icon}`}
 				>
-					&#xe885;
+					&#xe972;
 				</Link>
 				<Link
-					href="https://space.bilibili.com/67972196"
-					rel="noreferrer"
-					target="_blank"
+					href='https://space.bilibili.com/67972196'
+					rel='noreferrer'
+					target='_blank'
 					className={`iconfont ${styles.icon}`}
 				>
 					&#xe66d;

app/components/ThemeToggle.js

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import React, { useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-import styles from "../styles/Nav.module.css";
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import styles from '../styles/Nav.module.css';
 
 const ThemeToggle = () => {
 	const [mounted, setMounted] = useState(false);
@@ -11,13 +11,13 @@ const ThemeToggle = () => {
 	useEffect(() => setMounted(true), []);
 
 	if (!mounted)
-		return <span className={`iconfont ${styles.icon} loading`}> &#xe635;</span>;
+		return <span className={`iconfont ${styles.icon} loading`}> &#xe600;</span>;
 
 	const toggleTheme = () => {
-		if (theme === "light") {
-			setTheme("dark");
+		if (theme === 'light') {
+			setTheme('dark');
 		} else {
-			setTheme("light");
+			setTheme('light');
 		}
 	};
 
@@ -26,7 +26,7 @@ const ThemeToggle = () => {
 			className={`iconfont ${styles.icon}`}
 			onClick={toggleTheme}
 		>
-			&#xe635;
+			{theme === 'light' ? '\ue600' : '\ue6dc'}
 		</span>
 	);
 };

app/project/page.js

@@ -22,7 +22,7 @@ const Project = () => {
 					<Item
 						name='mini-react'
 						description='A mini React that implements React core concepts.'
-						icon='&#xe64b;'
+						icon='&#xe712;'
 						repo='https://github.com/LeeZ1Q/mini-react'
 					/>
 					<Item
@@ -31,16 +31,10 @@ const Project = () => {
 						icon='&#xe66c;'
 						repo='https://github.com/LeeZ1Q/mini-redux'
 					/>
-					<Item
-						name='react-dnd-playground'
-						description='React drag and drop examples playground.'
-						icon='&#xe704;'
-						repo='https://github.com/LeeZ1Q/react-dnd-playground'
-					/>
 					<Item
 						name='Book Finder'
 						description='A Book Searching Website using Google Book API.'
-						icon='&#xe61f;'
+						icon='&#xe605;'
 						repo='https://github.com/LeeZ1Q/bookfinder'
 					/>
 					<Item
@@ -52,6 +46,18 @@ const Project = () => {
 				</div>
 				<p className={styles.title}>Demo</p>
 				<div className={styles.list}>
+					<Item
+						name='debounce-throttle-demo'
+						description='A playground to try debouncing and throtting.'
+						icon='&#xe653;'
+						repo='https://github.com/LeeZ1Q/debounce-throttle-playground'
+					/>
+					<Item
+						name='react-dnd-playground'
+						description='React drag and drop examples playground.'
+						icon='&#xe704;'
+						repo='https://github.com/LeeZ1Q/react-dnd-playground'
+					/>
 					<Item
 						name='dark-mode-toggle'
 						description='A dark mode demo.'

package.json

@@ -28,4 +28,4 @@
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2"
   }
-}
+}