Add page Validate and update ValidationLog

src/partials/validationlog/ValidateRoadMap.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import ValidationSeasonItem from "./ValidationSeasonItem";
+import ValidationUsersImg from "./ValidationUsersImg";
+
+function ValidateRoadMap({ trunsSeason }) {
+
+  return (
+      <article className="pt-6">
+        <div className="xl:flex">
+          <div className="w-32 shrink-0">
+            <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">{trunsSeason.name}</h2>
+          </div>
+          <div className="grow pb-6 border-b border-slate-200">
+            <header>
+              <div className="flex flex-nowrap items-center space-x-2 mb-6">
+                {/* Avatars */}
+                <div className="flex shrink-0 -space-x-3 -ml-px">
+                  {trunsSeason.usersImges.map(pic => {
+                    return <ValidationUsersImg key={pic.imgId} image={pic}/>
+                  })}
+                </div>
+                <div className="text-slate-400">·</div>
+              </div>
+            </header>
+            {/* List */}
+            <ul className="-my-2">
+              {/* List item(s) */}
+              {trunsSeason.items.map((item, index) => {
+                return <ValidationSeasonItem key={item.id} length={trunsSeason.items.length} item={item} index={index}/>
+              })}
+            </ul>
+          </div>
+        </div>
+      </article>
+  )
+}
+
+export default  ValidateRoadMap;

src/partials/validationlog/ValidationSeasonItem.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+function ValidationSeasonItem({ length, item, index }) {
+  return (
+      <li className="relative py-2">
+        <div className="flex items-center mb-1">
+          {length-1!==index && <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>}
+          <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+            <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+              <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-bold text-slate-800 pl-9">
+            {item.trunsText} {item.checked && <a className="cursor-pointer font-bold text-indigo-500 hover:text-indigo-600 underline hover:no-underline" >{`0x${item.seasonId}`}</a>}
+          </h3>
+        </div>
+        <div className="block text-slate-800 w-fit pl-9">
+          <div className="text-base font-semibold underline mb-[-10px]">{`0x${item.seasonId}`}</div>
+          <span className="font-normal text-[10px]">Transactions ID</span>
+        </div>
+        <div className="mb-3.5 block text-slate-800 w-fit pl-9">
+          <div className="text-base font-semibold underline mb-[-10px]">{item.seasonId}</div>
+          <span className="font-normal text-[10px]">Validated data</span>
+        </div>
+        <a className="cursor-pointer pl-9 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
+      </li>
+  );
+}
+
+export default ValidationSeasonItem

src/partials/validationlog/ValidationUsersImg.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function ValidationUsersImg({ image }) {
+  return (
+      <a className="block" href="#0">
+        <img className="rounded-full border-2 border-white box-content" src={image.img} width="28" alt={image.img} height="28"/>
+      </a>
+  );
+}
+
+export default ValidationUsersImg