update src/components/CardDesign3/index.js

src/components/CardDesign3/index.js

@@ -5,6 +5,7 @@ import profilePic2 from "./images/profilePic2.svg";
 import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
+import pen from "./pen.svg";
 
 const CardDesign3 = ({ items }) => {
   return (
@@ -34,6 +35,12 @@ const CardDesign3 = ({ items }) => {
             </div>
           </div>
           {/* left */}
+          <div className="flex flex-row items-center">
+            <span className="px-2 py-0.5 rounded-sm bg-[#C9E2B388] text-[#468722] font-bold">
+              {item.number}
+            </span>
+            <img src={pen} alt="pen" className="mr-4 cursor-pointer" />
+          </div>
         </div>
       ))}
     </>

src/components/CardDesign3/pen.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_edit-2" data-name="vuesax/linear/edit-2" transform="translate(-684 -252)">
+    <g id="edit-2">
+      <path id="Vector" d="M9.263,1.439l-8.21,8.69a3.05,3.05,0,0,0-.67,1.43L.013,14.8a1.527,1.527,0,0,0,1.87,1.77l3.22-.55a2.871,2.871,0,0,0,1.39-.75l8.21-8.69c1.42-1.5,2.06-3.21-.15-5.3C12.353-.791,10.683-.061,9.263,1.439Z" transform="translate(687.997 254.161)" fill="none" stroke="#2483e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0A6.126,6.126,0,0,0,5.45,5.15" transform="translate(695.89 257.05)" fill="none" stroke="#2483e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(684 252)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>