From 6c048575c947f6fb046093ea75846673ae6c5a9a Mon Sep 17 00:00:00 2001 From: YuChanGongzhu <2556553872@qq.com> Date: Sun, 13 Oct 2024 05:51:44 +0800 Subject: [PATCH] feat:change icons --- assets/icons/CTA.svg | 13 +++++++ assets/icons/feed.svg | 23 ++++++++---- assets/icons/fitness.svg | 11 ++++++ assets/icons/health.svg | 61 ++++++++++++++++++++++++++++++++ assets/icons/loyalty.svg | 38 ++++++++++++++++++++ assets/icons/toy.svg | 20 +++++++++++ assets/icons/treat.svg | 37 +++++++++++--------- components/MainUI/Main.tsx | 71 ++++++++++++++++++++++++++++++++------ components/MainUI/chat.tsx | 9 +++-- 9 files changed, 244 insertions(+), 39 deletions(-) create mode 100644 assets/icons/CTA.svg create mode 100644 assets/icons/fitness.svg create mode 100644 assets/icons/health.svg create mode 100644 assets/icons/loyalty.svg create mode 100644 assets/icons/toy.svg diff --git a/assets/icons/CTA.svg b/assets/icons/CTA.svg new file mode 100644 index 0000000..e99aa60 --- /dev/null +++ b/assets/icons/CTA.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/icons/feed.svg b/assets/icons/feed.svg index 1e9cdfd..644a026 100644 --- a/assets/icons/feed.svg +++ b/assets/icons/feed.svg @@ -1,11 +1,20 @@ - - - - + + + + + + + + + + + + + - - + + - + diff --git a/assets/icons/fitness.svg b/assets/icons/fitness.svg new file mode 100644 index 0000000..bfac754 --- /dev/null +++ b/assets/icons/fitness.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/health.svg b/assets/icons/health.svg new file mode 100644 index 0000000..492af2d --- /dev/null +++ b/assets/icons/health.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/loyalty.svg b/assets/icons/loyalty.svg new file mode 100644 index 0000000..3e9f710 --- /dev/null +++ b/assets/icons/loyalty.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/toy.svg b/assets/icons/toy.svg new file mode 100644 index 0000000..ae1e43e --- /dev/null +++ b/assets/icons/toy.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/treat.svg b/assets/icons/treat.svg index ae08b88..1b15a7b 100644 --- a/assets/icons/treat.svg +++ b/assets/icons/treat.svg @@ -1,17 +1,20 @@ - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/components/MainUI/Main.tsx b/components/MainUI/Main.tsx index b088906..195f02e 100644 --- a/components/MainUI/Main.tsx +++ b/components/MainUI/Main.tsx @@ -5,21 +5,30 @@ import CartIcon from "@/assets/icons/cart.svg"; import InfoIcon from "@/assets/icons/info.svg"; import UserIcon from "@/assets/icons/user.svg"; import FeedIcon from "@/assets/icons/feed.svg"; +import TreatIcon from "@/assets/icons/treat.svg"; +import ToyIcon from "@/assets/icons/Toy.svg"; +import PlayIcon from "@/assets/icons/play.svg"; +import WalletIcon from "@/assets/icons/wallet.svg"; +import TOPlayIcon from "@/assets/icons/toPlay.svg"; +import Right1 from "@/assets/icons/right1.svg"; +import Right2 from "@/assets/icons/right2.svg"; +import HealthIcon from "@/assets/icons/health.svg"; +import LoyaltyIcon from "@/assets/icons/loyalty.svg"; +import FitnessIcon from "@/assets/icons/fitness.svg"; +import GameDataBackGround from "@/assets/icons/CTA.svg"; import { UIState } from "@/lib/UI"; + import Chat from "./chat"; import punkyFrames from "@/assets/animations/punky/idle"; // Default frames import punkySitFrames from "@/assets/animations/punky/sit.gif"; // Sit frames import punkyRollFrames from "@/assets/animations/punky/roll.gif"; // Roll frames import punkyRunFrames from "@/assets/animations/punky/run.gif"; // Run frames + import FrameAnimation from "../FrameAnimation"; import { useState, useRef, useEffect } from "react"; import Link from "next/link"; -import TOPlayIcon from "@/assets/icons/toPlay.svg"; -import Right1 from "@/assets/icons/right1.svg"; -import Right2 from "@/assets/icons/right2.svg"; -import PlayIcon from "@/assets/icons/play.svg"; + import { useRouter } from "next/navigation"; -import WalletIcon from "@/assets/icons/wallet.svg"; export default function Main({ switchTo, @@ -77,8 +86,6 @@ export default function Main({ return (
- {/* */} - {/* */} switchTo("user")} />
-
+
+ {/* 左侧图标 */} switchTo("wallet")} /> + + {/* 中间图标组 */} +
+ {/* Background */} + + {/* Image 组 */} +
+
+ Health +
10
+
+
+ Loyalty + 100 +
+
+ Fitness + 50 +
+
+
+ + + + {/* 右侧图标 */} Feed
+
= 844 ? "top-[20%]" : "top-[12%]"} items-center`} @@ -125,13 +176,13 @@ export default function Main({ onClick={() => handleAction("feed")} /> Treat handleAction("treat")} /> Toy handleAction("play with toy")} diff --git a/components/MainUI/chat.tsx b/components/MainUI/chat.tsx index ebd24a3..906ba13 100644 --- a/components/MainUI/chat.tsx +++ b/components/MainUI/chat.tsx @@ -228,12 +228,12 @@ const Chat = forwardRef((props: Props, ref) => { )}
- Toggle Input Mode + /> */} {isVoiceMode ? (
@@ -246,9 +246,8 @@ const Chat = forwardRef((props: Props, ref) => { onTouchMove={handleTouchMove} onMouseDown={startRecording} onMouseUp={handleTouchEnd} - className={`p-4 rounded-full w-full ${ - isRecording ? "bg-red-500" : "bg-gray-300" - }`} + className={`p-4 rounded-full w-full ${isRecording ? "bg-red-500" : "bg-gray-300" + }`} > {isRecording ? "松开 结束" : "按住 说话"}