git.iko.soy/bridge
on bbf707a help sign in
bridge/src/_walletgen/components/Header.js
121 lines 3.0 kB history raw
1import React from 'react';
3import { useOnline, ONLINE_STATUS } from '../../bridge/store/online';
4import { seq } from '../../bridge/lib/lib';
6const StatusIndicator = props => (
7 <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
8 <div className={`${props.c1} h-9`}>
9 {props.error === true ? <Ex /> : <Check />}
10 </div>
11 <p className={'pr-4 text-sm text-600 c-white m-0'}>{props.message}</p>
12 </div>
13);
15function ChooseIndicator(props) {
16 const online = useOnline();
18 switch (online) {
19 case ONLINE_STATUS.ONLINE:
20 return (
21 <StatusIndicator
22 message={'You are online.'}
23 c1={'bg-red'}
24 c2={'bg-red'}
25 error
26 />
27 );
28 case ONLINE_STATUS.OFFLINE:
29 return (
30 <StatusIndicator
31 message={'You are offline.'}
32 c1={'bg-green'}
33 c2={'bg-green'}
34 />
35 );
36 case ONLINE_STATUS.UNKNOWN:
37 default:
38 return (
39 <StatusIndicator
40 message={'Checking network connection..'}
41 c1={'bg-orange'}
42 c2={'bg-orange'}
43 />
44 );
45 }
48const ProgressIndicator = ({ currentStep, totalSteps }) => (
49 <div className={'relative h-9 col- mb-0'}>
50 <div
51 className={
52 'absolute ml-3 h-9 flex align-center text-sm white text-600'
53 }>{`Step ${currentStep} of ${totalSteps}`}</div>
54 <div className={'flex'}>
55 {seq(totalSteps).map((step, index) => (
56 <div
57 key={index}
58 className={`${
59 index + 1 > currentStep ? 'bg-gray' : 'bg-blue'
60 } h-9 col-`}>
61 {''}
62 </div>
63 ))}
64 </div>
65 </div>
66);
68const Header = props => (
69 <header className={'col'}>
70 <div className={'flex justify-between'}>
71 <ProgressIndicator
72 totalSteps={props.totalSteps}
73 currentStep={props.currentStep}
74 />
75 <ChooseIndicator />
76 </div>
77 <div className={'col-md-8 h-15 flex align-center'}>
78 <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
79 </div>
80 </header>
81);
83const Ex = () => {
84 return (
85 <svg
86 width="36"
87 height="36"
88 viewBox="0 0 36 36"
89 fill="none"
90 xmlns="http://www.w3.org/2000/svg">
91 <rect width="36" height="36" />
92 <path
93 fillRule="evenodd"
94 clipRule="evenodd"
95 d="M16.2857 18L12 22.2857L13.7143 24L18 19.7143L22.2857 24L24 22.2857L19.7143 18L23.9999 13.7143L22.2857 12L18 16.2857L13.7143 12L12 13.7143L16.2857 18Z"
96 fill="white"
97 />
98 </svg>
99 );
100};
102const Check = () => {
103 return (
104 <svg
105 width="36"
106 height="36"
107 viewBox="0 0 36 36"
108 fill="none"
109 xmlns="http://www.w3.org/2000/svg">
110 <rect width="36" height="36" />
111 <path
112 fillRule="evenodd"
113 clipRule="evenodd"
114 d="M24.9999 14.6329L23.2766 13L16.1699 19.7341L12.7233 16.4682L11 18.1012L16.1699 23L17.2451 21.9812L17.8932 21.3671L24.9999 14.6329Z"
115 fill="white"
116 />
117 </svg>
118 );
119};
121export default Header;