commit

src/app/flash-audit-result/page.js

@@ -2,10 +2,12 @@ import Image from "next/image";
 
 //! import image
 import FlashAudit from "@/assets/image/flash-audit.png";
-import SearchToken from "@/components/Form/SearchToken";
-
 import EthereumLogoSmall from "@/assets/icons/ethereum-logo-small.svg";
 import DextoolsLogoSmall from "@/assets/icons/dextools-logo-small.svg";
+import Risky from "@/assets/icons/risky.svg";
+import Attention from "@/assets/icons/attention.svg";
+
+import SearchToken from "@/components/Form/SearchToken";
 
 const FlashAuditResult = () => {
   return (
@@ -17,13 +19,35 @@ const FlashAuditResult = () => {
           <SearchToken check={true} />
         </div>
       </div>
-      <div className="flex flex-row bg-[#1B1B1B] items-center justify-center w-[1554px] h-[84px] mt-[29px]">
-        <div className="flex flex-col">
-          <p className="text-white text-[18.88px] font-bold">Flash</p>
-          <p>Flash 3.0</p>
-          <div className="flex flex-row">
-            <Image src={EthereumLogoSmall} alt="etherem" />
-            <Image src={DextoolsLogoSmall} alt="etherem" />
+      <div className="flex flex-row bg-[#1B1B1B] items-center justify-between w-[1554px] h-[84px] mt-[29px]">
+        <div className="flex flex-row justify-between items-center w-[851px]">
+          <div className="flex flex-col ">
+            <p className="text-white text-[18.88px] font-bold">Flash</p>
+            <p className="text-white text-[14px]">Flash 3.0</p>
+            <div className="flex flex-row mt-1 gap-2">
+              <Image src={EthereumLogoSmall} alt="etherem" />
+              <Image src={DextoolsLogoSmall} alt="etherem" />
+            </div>
+          </div>
+
+          <p className="text-white text-[23.04px] font-bold">
+            Security Detection
+          </p>
+
+          <div className="flex flex-row gap-2">
+            <Image src={Risky} alt="risky" />
+            <div className="flex flex-col text-white">
+              <p className="text-base">Risky item</p>
+              <p className="text-base font-bold">0</p>
+            </div>
+          </div>
+
+          <div className="flex flex-row gap-2">
+            <Image src={Attention} alt="attention" />
+            <div className="flex flex-col text-white">
+              <p className="text-base">Attention item</p>
+              <p className="text-base font-bold">0</p>
+            </div>
           </div>
         </div>
       </div>

src/components/Layouts/SideBar/index.js

@@ -36,6 +36,7 @@ import Dark from "@/assets/icons/dark.svg";
 import Light from "@/assets/icons/light.svg";
 
 import FlokiBinance from "@/assets/image/floki-binance.png";
+import IconBtn from "@/components/Button/IconBtn";
 
 const SideBar = () => {
   const [active, setActive] = useState(1);
@@ -46,7 +47,15 @@ const SideBar = () => {
         <p className="text-[#fff] text-[19.067px] font-bold">Flashpad</p>
       </div>
 
-      <div className="mt-[148.76px]">
+      <button
+        className={`ml-10 mt-[34px] px-6 py-3 flex justify-center items-center gap-2 rounded-[39px] h-[43px] bg-[#FCBF07]`}
+      >
+        <p className={`text-[#16171B] text-base font-semibold capitalize`}>
+          Buy $Flash
+        </p>
+      </button>
+
+      <div className="mt-[26px]">
         <p className="text-[#86888c] text-[14px] font-semibold uppercase tracking-[1.5px] pl-10">
           EXPLORE
         </p>