Merge pull request #11 from franze6/Shared_data_

Shared data

src/App.jsx

@@ -25,6 +25,7 @@ import Onboarding1 from "./pages/Onboarding1";
 import Onboarding2 from "./pages/Onboarding2";
 import Onboarding3 from "./pages/Onboarding3";
 import Onboarding4 from "./pages/Onboarding4";
+import SharedData from "./pages/SharedData";
 import ResetPassword from "./pages/ResetPassword";
 import Signup from "./pages/Signup";
 import Signin from "./pages/Signin";
@@ -55,6 +56,7 @@ function App() {
         <Route path="/onboarding-3" element={<Onboarding3 />} />
         <Route path="/onboarding-4" element={<Onboarding4 />} />
         <Route path="/component/button" element={<ButtonPage />} />
+        <Route path="/shared-data" element={<SharedData />} />
         <Route path="/component/badge" element={<BadgePage />} />
         <Route path="/component/accordion" element={<AccordionPage />} />
         <Route path="/reset-password" element={<ResetPassword />} />

src/components/DropdownProfile.jsx

@@ -43,7 +43,7 @@ function DropdownProfile({
         onClick={() => setDropdownOpen(!dropdownOpen)}
         aria-expanded={dropdownOpen}
       >
-        <img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User" />
+        <img className="w-8 h-8 rounded-full" src={localStorage.getItem('svgAvatar') || UserAvatar} width="32" height="32" alt="User" />
         <div className="flex items-center truncate">
           <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
           <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">

src/pages/SharedData.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import User06 from "../images/user-28-06.jpg";
+import User08 from "../images/user-28-08.jpg";
+import User09 from "../images/user-28-09.jpg";
+import SharedDataRoadMap from "../partials/shareddata/SharedDataRoadmap";
+
+function SharedData() {
+
+  const sharedDataItems = {
+      data: localStorage.getItem('digitalId'),
+      items: [
+        {
+          dataShared: localStorage.getItem('digitalId'),
+          id: '923',
+          text: 'United Kindom',
+          typeItem: 'Residence',
+          usersImges: [
+            {
+              size: 32,
+              img: User06,
+              imgId: "90"
+            },
+            {
+              size: 32,
+              img: User08,
+              imgId: "93"
+            },
+            {
+              size: 32,
+              img: User09,
+              imgId: "89"
+            },
+          ],
+        },
+        {
+          dataShared: localStorage.getItem('digitalId'),
+          id: '401',
+          text: 'A123B3143',
+          typeItem: 'Document ID',
+          usersImges: [
+            {
+              size: 32,
+              img: User06,
+              imgId: "67"
+            },
+            {
+              size: 32,
+              img: User08,
+              imgId: "71"
+            },
+          ],
+        },
+      ]
+    };
+
+  function saveDigitalId() {
+    localStorage.setItem('svgAvatar', generateSvgAvatar())
+  }
+  return (
+    <main className="bg-white">
+
+      <div className="relative flex">
+
+        {/* Content */}
+        <div className="w-full md:w-1/2">
+
+          <div className="min-h-screen h-full flex flex-col after:flex-1">
+
+            <div className="px-4 mt-16 py-9">
+              <div className=" flex flex-col max-w-md mx-auto">
+                <h1 className="text-3xl text-slate-800 font-bold mb-8">Shared data ✨</h1>
+                <ul>
+                  {sharedDataItems.items.map(item => {
+                    return(
+                        <li key={item.id}>
+                          <SharedDataRoadMap data={item}/>
+                        </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        {/* Image */}
+        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+          <div className="flex mt-40 flex-col items-center gap-2.5">
+            <img className="object-cover object-center" src={generateSvgAvatar()} width="493px" height="493px" alt="Onboarding" />
+            <span className="text-sm">{sharedDataItems.data}</span>
+            <Link onClick={()=>saveDigitalId()} className="mt-12 btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/">Get my digital ID</Link>
+          </div>
+        </div>
+
+      </div>
+
+    </main>
+  );
+}
+
+export default SharedData;

src/pages/digitalId/Validate.jsx

@@ -22,18 +22,22 @@ function Validate () {
       data: '7234ABC342342352345',
       usersImges: [
         {
+          size: 24,
           img: User06,
           imgId: "343"
         },
         {
+          size: 24,
           img: User08,
           imgId: "345"
         },
         {
+          size: 24,
           img: User09,
           imgId: "321"
         },
         {
+          size: 24,
           img: User05,
           imgId: "387"
         },

src/pages/digitalId/ValidationLog.jsx

@@ -20,18 +20,22 @@ function ValidationLog () {
       data: '7234ABC342342352345',
       usersImges: [
         {
+          size: 24,
           img: User06,
           imgId: "249"
         },
         {
+          size: 24,
           img: User08,
           imgId: "212"
         },
         {
+          size: 24,
           img: User09,
           imgId: "217"
         },
         {
+          size: 24,
           img: User05,
           imgId: "276"
         },
@@ -63,18 +67,22 @@ function ValidationLog () {
       data: '7234ABC342342352345',
       usersImges: [
         {
+          size: 24,
           img: User06,
           imgId: "145"
         },
         {
+          size: 24,
           img: User08,
           imgId: "182"
         },
         {
+          size: 24,
           img: User09,
           imgId: "154"
         },
         {
+          size: 24,
           img: User05,
           imgId: "114"
         },

src/partials/Sidebar.jsx

@@ -47,6 +47,10 @@ function Sidebar({
     }
   }, [sidebarExpanded]);
 
+  function saveDigitalId () {
+    localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
+  }
+
   return (
     <div>
       {/* Sidebar backdrop (mobile only) */}
@@ -415,6 +419,13 @@ function Sidebar({
                               </span>
                             </NavLink>
                           </li>
+                          <li className="mb-1 last:mb-0">
+                            <NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
+                              <span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
+                                Shared Data
+                              </span>
+                            </NavLink>
+                          </li>
                         </ul>
                       </div>
                     </React.Fragment>

src/partials/shareddata/SharedDataRoadmap.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import ValidationUsersImg from "../validationlog/ValidationUsersImg";
+
+function SharedDataRoadMap({ data }) {
+
+  return (
+      <article className="mb-2">
+        <div className="xl:flex">
+          <div className="grow">
+            <div className="flex items-center mb-2 relative">
+              <div className="absolute left-0" aria-hidden="true">
+                <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M4 7H0V11.9C0 12.9 0.7 13.8 1.7 14C2.9 14.2 4 13.2 4 12V7Z" fill="#A5B4FC"/>
+                  <path d="M15.0004 0H7.00039C6.40039 0 6.00039 0.4 6.00039 1V12C6.00039 12.7 5.80039 13.4 5.40039 14H13.0004C14.7004 14 16.0004 12.7 16.0004 11V1C16.0004 0.4 15.6004 0 15.0004 0Z" fill="#6366F1"/>
+                </svg>
+              </div>
+              <div className="flex flex-col">
+                <h3 className="text-base font-semibold text-slate-800 pl-7">
+                  {data.text}
+                </h3>
+                <span className="font-normal text-[10px] text-slate-600 pl-7">{data.typeItem}</span>
+              </div>
+            </div>
+            <div className="block text-slate-600 w-fit pl-7">
+              <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.dataShared}</div>
+              <span className="font-normal text-[10px]">seed</span>
+            </div>
+            <div className="mb-3.5 block text-slate-600 w-fit pl-7">
+              <div className="text-xs font-semibold underline mb-[-10px] cursor-pointer">{data.dataShared}</div>
+              <span className="font-normal text-[10px]">hash</span>
+            </div>
+            <div className="flex flex-nowrap items-center space-x-2 mb-3.5">
+              {/* Avatars */}
+              <div className="flex shrink-0 -space-x-3 -ml-px pl-7">
+                {data.usersImges.map(pic => {
+                  return <ValidationUsersImg key={pic.imgId} image={pic}/>
+                })}
+              </div>
+            </div>
+            <a className="cursor-pointer pl-7 font-normal text-sm text-indigo-500 hover:text-indigo-600">Explore -&gt;</a>
+          </div>
+        </div>
+      </article>
+  )
+}
+
+export default  SharedDataRoadMap;

src/partials/validationlog/ValidationUsersImg.jsx

@@ -3,7 +3,7 @@ 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"/>
+        <img className="rounded-full border-2 border-slate-100 box-content" src={image.img} width={`${image.size}`} alt={image.img} height={`${image.size}`}/>
       </a>
   );
 }