Compare commits
2 Commits
Validation
...
Deleting_e
| Author | SHA1 | Date | |
|---|---|---|---|
|
cfa5af78c0 | ||
|
|
fc4d9fb897 |
@@ -1,9 +1,16 @@
|
||||
import React from 'react';
|
||||
import React, {useEffect} from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
|
||||
function Onboarding3() {
|
||||
|
||||
useEffect(()=>{
|
||||
return ()=>{
|
||||
localStorage.setItem('svgAvatar', generateSvgAvatar())
|
||||
}
|
||||
}, [])
|
||||
|
||||
const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
|
||||
return (
|
||||
<main className="bg-white">
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import React from 'react';
|
||||
import React, {useEffect} from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
|
||||
import Logo from "../images/logo.png";
|
||||
|
||||
function Onboarding4() {
|
||||
|
||||
function saveDigitalId() {
|
||||
localStorage.setItem('svgAvatar', generateSvgAvatar())
|
||||
}
|
||||
useEffect(()=>{
|
||||
return ()=>{
|
||||
localStorage.setItem('svgAvatar', generateSvgAvatar())
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<main className="bg-white">
|
||||
@@ -65,7 +67,7 @@ function Onboarding4() {
|
||||
<path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
|
||||
</svg>
|
||||
<h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
|
||||
<button onClick={()=>saveDigitalId()} className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<button className="btn px-6 bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<Link to="/dashboard">Go To Profile -></Link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -47,10 +47,6 @@ function Sidebar({
|
||||
}
|
||||
}, [sidebarExpanded]);
|
||||
|
||||
function saveDigitalId () {
|
||||
localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Sidebar backdrop (mobile only) */}
|
||||
@@ -340,193 +336,6 @@ function Sidebar({
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* More group */}
|
||||
<div>
|
||||
<h3 className="text-xs uppercase text-slate-500 font-semibold pl-3">
|
||||
<span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
|
||||
•••
|
||||
</span>
|
||||
<span className="lg:hidden lg:sidebar-expanded:block 2xl:block">More</span>
|
||||
</h3>
|
||||
<ul className="mt-3">
|
||||
{/* Onboarding */}
|
||||
<SidebarLinkGroup>
|
||||
{(handleClick, open) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a
|
||||
href="#0"
|
||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${open && 'hover:text-slate-200'}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
sidebarExpanded ? handleClick() : setSidebarExpanded(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
|
||||
<path
|
||||
className="fill-current text-slate-600"
|
||||
d="M19 5h1v14h-2V7.414L5.707 19.707 5 19H4V5h2v11.586L18.293 4.293 19 5Z"
|
||||
/>
|
||||
<path
|
||||
className="fill-current text-slate-400"
|
||||
d="M5 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM5 23a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Onboarding
|
||||
</span>
|
||||
</div>
|
||||
{/* Icon */}
|
||||
<div className="flex shrink-0 ml-2">
|
||||
<svg
|
||||
className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink end to="/onboarding-1" 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">
|
||||
Step 1
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink end to="/onboarding-2" 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">
|
||||
Step 2
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink end to="/onboarding-3" 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">
|
||||
Step 3
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink end to="/onboarding-4" 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">
|
||||
Step 4
|
||||
</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>
|
||||
);
|
||||
}}
|
||||
</SidebarLinkGroup>
|
||||
{/* Components */}
|
||||
<SidebarLinkGroup activecondition={pathname.includes('component')}>
|
||||
{(handleClick, open) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a
|
||||
href="#0"
|
||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
|
||||
pathname.includes('component') && 'hover:text-slate-200'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
sidebarExpanded ? handleClick() : setSidebarExpanded(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className={`fill-current text-slate-600 ${pathname.includes('component') && 'text-indigo-500'}`}
|
||||
cx="16"
|
||||
cy="8"
|
||||
r="8"
|
||||
/>
|
||||
<circle
|
||||
className={`fill-current text-slate-400 ${pathname.includes('component') && 'text-indigo-300'}`}
|
||||
cx="8"
|
||||
cy="16"
|
||||
r="8"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Components
|
||||
</span>
|
||||
</div>
|
||||
{/* Icon */}
|
||||
<div className="flex shrink-0 ml-2">
|
||||
<svg
|
||||
className={`w-3 h-3 shrink-0 ml-1 fill-current text-slate-400 ${open && 'transform rotate-180'}`}
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul className={`pl-9 mt-1 ${!open && 'hidden'}`}>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/component/button"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Button
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/component/badge"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Badge
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/component/accordion"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Accordion
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}}
|
||||
</SidebarLinkGroup>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expand / collapse button */}
|
||||
|
||||
Reference in New Issue
Block a user