From f1f13caf3244aec8d73b59f91ce5abdd2c819932 Mon Sep 17 00:00:00 2001
From: opacity <980892894@qq.com>
Date: Wed, 17 Apr 2024 18:07:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(toggle):=E6=96=B0=E5=A2=9E=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=AF=BC=E8=88=AA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_components/xiaban/ContainerB.tsx | 13 ++++++
 src/app/_components/xiaban/Content1.tsx   | 11 +++++
 src/app/_components/xiaban/Content2.tsx   |  5 +++
 src/app/_components/xiaban/Content3.tsx   |  5 +++
 src/app/_components/xiaban/Content4.tsx   |  5 +++
 src/app/_components/xiaban/Toggle.tsx     | 36 ++++++++++++++++
 src/app/a/b/page.tsx                      |  9 ++++
 src/app/a/page.tsx                        | 52 ++---------------------
 8 files changed, 87 insertions(+), 49 deletions(-)
 create mode 100644 src/app/_components/xiaban/ContainerB.tsx
 create mode 100644 src/app/_components/xiaban/Content1.tsx
 create mode 100644 src/app/_components/xiaban/Content2.tsx
 create mode 100644 src/app/_components/xiaban/Content3.tsx
 create mode 100644 src/app/_components/xiaban/Content4.tsx
 create mode 100644 src/app/_components/xiaban/Toggle.tsx
 create mode 100644 src/app/a/b/page.tsx

diff --git a/src/app/_components/xiaban/ContainerB.tsx b/src/app/_components/xiaban/ContainerB.tsx
new file mode 100644
index 0000000..774a610
--- /dev/null
+++ b/src/app/_components/xiaban/ContainerB.tsx
@@ -0,0 +1,13 @@
+"use client"
+import { usePathname, useRouter} from "next/navigation";
+
+export const ContainerB = () => {
+    const pathname = usePathname();
+    const router = useRouter();
+    return (
+      <div>
+        <button onClick={() => router.push("/a")}>路由回a</button>
+          <div>{pathname}</div>
+      </div>
+    );
+}
diff --git a/src/app/_components/xiaban/Content1.tsx b/src/app/_components/xiaban/Content1.tsx
new file mode 100644
index 0000000..dbddcb0
--- /dev/null
+++ b/src/app/_components/xiaban/Content1.tsx
@@ -0,0 +1,11 @@
+"use client"
+import {usePathname, useRouter} from "next/navigation";
+
+export const Content1 = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+    return <div>
+        <button onClick={() => router.push('/a/b')}>路由到b</button>
+        <div>{pathname}</div>
+    </div>
+}
diff --git a/src/app/_components/xiaban/Content2.tsx b/src/app/_components/xiaban/Content2.tsx
new file mode 100644
index 0000000..c16d9dd
--- /dev/null
+++ b/src/app/_components/xiaban/Content2.tsx
@@ -0,0 +1,5 @@
+"use client"
+
+export const Content2 = () => {
+    return <div>page2</div>
+}
diff --git a/src/app/_components/xiaban/Content3.tsx b/src/app/_components/xiaban/Content3.tsx
new file mode 100644
index 0000000..c08f28c
--- /dev/null
+++ b/src/app/_components/xiaban/Content3.tsx
@@ -0,0 +1,5 @@
+"use client"
+
+export const Content3 = () => {
+    return <div>page3</div>
+}
diff --git a/src/app/_components/xiaban/Content4.tsx b/src/app/_components/xiaban/Content4.tsx
new file mode 100644
index 0000000..47de1d3
--- /dev/null
+++ b/src/app/_components/xiaban/Content4.tsx
@@ -0,0 +1,5 @@
+"use client"
+
+export const Content4 = () => {
+    return <div>page4</div>
+}
diff --git a/src/app/_components/xiaban/Toggle.tsx b/src/app/_components/xiaban/Toggle.tsx
new file mode 100644
index 0000000..e20e139
--- /dev/null
+++ b/src/app/_components/xiaban/Toggle.tsx
@@ -0,0 +1,36 @@
+"use client"
+import {useState} from "react";
+import {Content1} from "@/app/_components/xiaban/Content1";
+import {Content2} from "@/app/_components/xiaban/Content2";
+import {Content3} from "@/app/_components/xiaban/Content3";
+import {Content4} from "@/app/_components/xiaban/Content4";
+
+export const Toggle = () => {
+    const [currentContent, setCurrentContent ] = useState<number>(1);
+    const active = "text-red bg-gray-200";
+    const renderContent = () => {
+        switch (currentContent){
+            case 1:
+                return <Content1></Content1>;
+            case 2:
+                return <Content2></Content2>;
+            case 3:
+                return <Content3></Content3>;
+            case 4:
+                return <Content4></Content4>;
+        }
+    }
+    return <div>
+        <div className={"space-y-10px flex flex-col"}>
+            <button onClick={() => setCurrentContent(1)}
+                    className={currentContent === 1 ? active : ""}>page1</button>
+            <button onClick={() => setCurrentContent(2)}
+                    className={currentContent === 2 ? active : ""}>page2</button>
+            <button onClick={() => setCurrentContent(3)}
+                    className={currentContent === 3 ? active : ""}>page3</button>
+            <button onClick={() => setCurrentContent(4)}
+                    className={currentContent === 4 ? active : ""}>page4</button>
+        </div>
+        {renderContent()}
+    </div>;
+}
diff --git a/src/app/a/b/page.tsx b/src/app/a/b/page.tsx
new file mode 100644
index 0000000..a34913c
--- /dev/null
+++ b/src/app/a/b/page.tsx
@@ -0,0 +1,9 @@
+import {ContainerB} from "@/app/_components/xiaban/ContainerB";
+
+const page = () => {
+    return <div>
+        <ContainerB></ContainerB>
+    </div>
+}
+
+export default page;
diff --git a/src/app/a/page.tsx b/src/app/a/page.tsx
index f78edef..80b80f6 100644
--- a/src/app/a/page.tsx
+++ b/src/app/a/page.tsx
@@ -1,55 +1,9 @@
-import {Card, CardClass} from "@/app/_components/Card";
+import {Toggle} from "@/app/_components/xiaban/Toggle";
 
-const cards:CardClass[] = [
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:120
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:130
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:140
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:150
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:160
-    },
-]
 const Page = () => {
 
-    return <div className={"space-y-10px"}>
-        {cards.map((item,index)=> (
-            <Card
-                time = {item.time}
-                img = {item.img}
-                title = {item.title}
-                likes={item.likes}
-                name = {item.name}
-                key={index}
-            />
-        ))}
+    return <div>
+        <Toggle></Toggle>
     </div>
 }