Introducing DevDisplay Universe

Author: codeaashu

package-lock.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "sitemap": "^8.0.0",
+    "styled-components": "^6.1.15",
     "web-vitals": "^3.5.2"
   },
   "scripts": {

package.json

@@ -52,5 +52,6 @@
     "LinkedIn": "https://www.linkedin.com/in/ashutoshkumaraashu/",
     "Instagram": "https://www.instagram.com/warrior_aashuu/",
     "Email": "[email protected]"
-  }
+  },
+  "verified": true
 }

public/data/codeaashu.json

@@ -52,12 +52,24 @@ function Card({ data }) {
         <div className="w-[55%] sm:w-[75%]">
           <h3>
             <a
-              className="text-lg font-bold hover:text-textSecondary dark:text-white"
+              className="flex items-center text-lg font-bold hover:text-textSecondary dark:text-white"
               href={data.portfolio}
               target="_blank"
               rel="noreferrer"
             >
               {data.name}
+              {data.verified && (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  height="16"
+                  style={{ marginLeft: '8px' }}
+                >
+                  <circle cx="12" cy="12" r="10" fill="rgb(24, 186, 255)" />
+                  <path fill="#fff" d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z" />
+                </svg>
+              )}
             </a>
           </h3>
           <p className="flex items-center gap-x-1 text-sm dark:text-white">

src/components/Profile/Profile.jsx

@@ -15,6 +15,7 @@ function ProfileSkeleton() {
       Instagram: '',
       Email: '',
     },
+    verified: false,
   };
 
   return (
@@ -23,7 +24,21 @@ function ProfileSkeleton() {
         <div className="flex gap-[1rem]">
           <div className="skeleton h-[6.1rem] w-[6.1rem] flex-shrink-0 rounded"></div>
           <div className="w-[80%] overflow-hidden">
-            <h3 className="skeleton mb-[0.5rem] h-[1.6rem] w-full rounded-[0.25rem]">{skeletonData.name}</h3>
+            <h3 className="skeleton mb-[0.5rem] h-[1.6rem] w-full rounded-[0.25rem]">
+              {skeletonData.name}
+              {skeletonData.verified && (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="16"
+                  height="16"
+                  style={{ marginLeft: '8px' }}
+                >
+                  <circle cx="12" cy="12" r="10" fill="rgb(24, 186, 255)" />
+                  <path fill="#fff" d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z" />
+                </svg>
+              )}
+            </h3>
             <p className="skeleton mb-[0.4rem] h-[1.2rem] w-full rounded-[0.25rem]">{skeletonData.location}</p>
             <div className="flex gap-[1rem] overflow-hidden">
               {skeletonData.skills &&
@@ -64,4 +79,5 @@ function ProfileSkeleton() {
     </div>
   );
 }
+
 export default ProfileSkeleton;