feat: 详情标签替换

punky-lab · Oct 8, 2024 · e22e680 · e22e680
1 parent 7057e69
commit e22e680
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 37 deletions.
diff --git a/assets/ui/pop-card.svg b/assets/ui/pop-card.svg
diff --git a/assets/ui/pop-label.svg b/assets/ui/pop-label.svg
diff --git a/components/MainUI/Store.tsx b/components/MainUI/Store.tsx
@@ -4,7 +4,6 @@ import { TraitMetadata } from "@/lib/traits";
 import { getTraitMetadata } from "@/app/api/traits";
 import StoreItem from "@/components/MainUI/storeItem";
 import LoadingAnimation from "@/components/loadingAnimation";
-import { div } from "framer-motion/client";
 
 export default function Store({ onClose }: { onClose: () => void }) {
   const [metadata, setMetadata] = useState<TraitMetadata[]>([]);
@@ -23,7 +22,7 @@ export default function Store({ onClose }: { onClose: () => void }) {
       {dataLoading ? (
         <LoadingAnimation text="loading" />
       ) : (
-        <div className="grid grid-cols-2 gap-x-2 gap-y-2 px-4">
+        <div className="grid grid-cols-2 gap-x-2 gap-y-2 px-4 py-2">
           {metadata.map((data, index) => (
             <div className="flex justify-center" key={index}>
               <StoreItem

diff --git a/components/MainUI/storeItem.tsx b/components/MainUI/storeItem.tsx
@@ -26,28 +26,24 @@ export default function StoreItem({ image, name, owned }: StoreItemProps) {
 
   return (
     <>
-      <div
-        // className="bg-gradient-to-br rounded-lg p-3 shadow-lg transform duration-300 hover:scale-105 hover:shadow-xl cursor-pointer"
-        // style={{
-        //   background:
-        //     "linear-gradient(90deg, rgba(58, 46, 81, 1), rgba(85, 70, 100, 1))",
-        // }}
-        className="bg-[url('../assets/ui/pop-up-bg.svg')] bg-cover bg-center px-4"
-        onClick={handleItemClick}
-      >
-        <div className="rounded-lg pt-4">
-          <Image
-            src={image}
-            alt={name}
-            width={48}
-            height={48}
-            className="w-full h-auto mx-auto rounded-md"
-          />
-        </div>
-        {/* <div className="text-white text-[10px] text-center mb-2 h-10 flex items-center justify-center">
+      <div className="flex flex-col">
+        <div
+          className="bg-[url('../assets/ui/pop-card.svg')] bg-cover bg-center w-[100px] h-[100px]"
+          onClick={handleItemClick}
+        >
+          <div className="rounded-lg mt-4">
+            <Image
+              src={image}
+              alt={name}
+              width={64}
+              height={64}
+              className="h-auto mx-auto rounded-md"
+            />
+          </div>
+          {/* <div className="text-white text-[10px] text-center mb-2 h-10 flex items-center justify-center">
           {name}
         </div> */}
-        {/* {owned ? (
+          {/* {owned ? (
           <div className="bg-green-500 text-white text-center py-1 rounded-full text-xs font-medium">
             Owned
           </div>
@@ -66,6 +62,13 @@ export default function StoreItem({ image, name, owned }: StoreItemProps) {
             </div>
           </div>
         )} */}
+        </div>
+        <div
+          className="bg-[url('../assets/ui/pop-label.svg')] bg-cover bg-center mt-4 w-full"
+          onClick={() => handleItemClick()}
+        >
+          <p className="font-[12px] text-center">Buy</p>
+        </div>
       </div>
 
       {isModalOpen && (

diff --git a/components/itemDetailModal/index.tsx b/components/itemDetailModal/index.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import CloseIcon from "@/assets/icons/close.svg";
+import { div } from "framer-motion/client";
 
 interface ItemDetailModalProps {
   image: string;
@@ -36,32 +37,34 @@ export default function ItemDetailModal({
             <p className="text-xl font-semibold">Detail</p>
           </div>
         </div>
-        <div className="flex flex-col p-8">
-          <h2 className="text-sm font-bold text-white">{name}</h2>
+        <div className="flex flex-col items-center p-4">
           <div className="flex justify-center items-center mb-4">
             <Image
               src={image}
               alt={name}
-              width={150}
-              height={150}
+              width={100}
+              height={100}
               className="rounded-md"
             />
           </div>
+          <h2 className=" text-white font-[12px]">{name}</h2>
           <div className="flex items-center justify-center mb-4">
             <span className="text-lg text-gray-200 mr-2 mb-2">💰</span>
             <p className="text-lg mb-0 text-gray-200">{price}</p>
           </div>
-          <div className="flex justify-center">
-            {owned ? (
-              <button className="w-full bg-gradient-to-br from-purple-300 to-purple-900 text-white py-2 rounded-lg hover:from-indigo-600 hover:to-indigo-800 transition-colors">
-                Equip
-              </button>
-            ) : (
-              <button className="w-full bg-gradient-to-br from-purple-300 to-purple-900 text-white py-2 rounded-lg hover:from-pink-600 hover:to-red-600 transition-colors">
-                Buy
-              </button>
-            )}
-          </div>
+          {owned ? (
+            <div className="flex flex-row justify-center items-center">
+              <div className="bg-[url('../assets/ui/pop-label.svg')] bg-cover bg-center w-2/3  min-h-[60px] p-4 flex justify-center items-center">
+                <p className="text-[12px] font-semibold">Equip</p>
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-row justify-center items-center w-full">
+              <div className="bg-[url('../assets/ui/pop-label.svg')] bg-cover bg-center w-2/3  min-h-[56px] p-4 flex justify-center items-center">
+                <p className="text-[12px] font-semibold">Buy</p>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>