onairos 2.2.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/onairos.bundle.js +1 -1
- package/dist/onairos.bundle.js.map +1 -1
- package/dist/onairos.esm.js +1 -1
- package/dist/onairos.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DataRequest.js +35 -97
- package/src/overlay/CheckBox.jsx +83 -23
- package/src/overlay/IndividualConnection.js +145 -15
- package/src/overlay/IndividualConnectionNew.jsx +101 -22
|
@@ -11,20 +11,76 @@ function IndividualConnection(props) {
|
|
|
11
11
|
'Persona';
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
|
-
<div className={`relative p-4 sm:p-6 rounded-
|
|
15
|
-
isDisabled
|
|
14
|
+
<div className={`relative p-4 sm:p-6 rounded-lg overflow-hidden mb-4 transition-all duration-300 border-2 ${
|
|
15
|
+
isDisabled
|
|
16
|
+
? 'bg-gray-50 border-gray-200 opacity-60'
|
|
17
|
+
: selected
|
|
18
|
+
? 'bg-green-50 border-green-400 shadow-lg transform scale-[1.02]'
|
|
19
|
+
: 'bg-white border-gray-300 hover:border-blue-300 hover:shadow-md'
|
|
16
20
|
}`}>
|
|
21
|
+
|
|
22
|
+
{/* Selection Status Indicator */}
|
|
23
|
+
{selected && !isDisabled && (
|
|
24
|
+
<div className="absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
|
|
25
|
+
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
26
|
+
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
27
|
+
</svg>
|
|
28
|
+
</div>
|
|
29
|
+
)}
|
|
30
|
+
|
|
17
31
|
<div className="relative">
|
|
18
|
-
|
|
32
|
+
{/* Header with title and status */}
|
|
33
|
+
<div className="flex items-center justify-between mb-4">
|
|
34
|
+
<div className="flex items-center space-x-3">
|
|
35
|
+
{/* Data type icon */}
|
|
36
|
+
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-xl ${
|
|
37
|
+
isDisabled
|
|
38
|
+
? 'bg-gray-200 text-gray-400'
|
|
39
|
+
: selected
|
|
40
|
+
? 'bg-green-500 text-white'
|
|
41
|
+
: 'bg-blue-500 text-white'
|
|
42
|
+
}`}>
|
|
43
|
+
{props.title === "Avatar" ? "👤" :
|
|
44
|
+
props.title === "Traits" ? "🧠" :
|
|
45
|
+
props.title === "Personality" ? "🎭" : "📊"}
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div>
|
|
49
|
+
<h3 className={`text-lg font-semibold ${
|
|
50
|
+
isDisabled ? 'text-gray-400' : selected ? 'text-green-700' : 'text-gray-800'
|
|
51
|
+
}`}>
|
|
52
|
+
{Insight}
|
|
53
|
+
</h3>
|
|
54
|
+
|
|
55
|
+
{/* Status badge */}
|
|
56
|
+
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
57
|
+
isDisabled
|
|
58
|
+
? 'bg-red-100 text-red-600'
|
|
59
|
+
: selected
|
|
60
|
+
? 'bg-green-100 text-green-700'
|
|
61
|
+
: 'bg-blue-100 text-blue-700'
|
|
62
|
+
}`}>
|
|
63
|
+
{isDisabled ? '❌ Not Available' : selected ? '✅ Selected' : '⏳ Available'}
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
{/* Checkbox with enhanced styling */}
|
|
70
|
+
<div className="flex items-center justify-center mb-4">
|
|
19
71
|
<Box
|
|
20
72
|
active={props.active}
|
|
21
73
|
onSelectionChange={(isSelected) => {
|
|
22
74
|
setSelected(isSelected);
|
|
23
|
-
props.onSelectionChange
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
75
|
+
if (props.onSelectionChange) {
|
|
76
|
+
props.onSelectionChange(isSelected);
|
|
77
|
+
}
|
|
78
|
+
if (props.changeGranted) {
|
|
79
|
+
if (isSelected) {
|
|
80
|
+
props.changeGranted(1);
|
|
81
|
+
} else {
|
|
82
|
+
props.changeGranted(-1);
|
|
83
|
+
}
|
|
28
84
|
}
|
|
29
85
|
}}
|
|
30
86
|
disabled={isDisabled}
|
|
@@ -32,31 +88,54 @@ function IndividualConnection(props) {
|
|
|
32
88
|
number={props.number + 1}
|
|
33
89
|
type="Test"
|
|
34
90
|
title={props.title}
|
|
91
|
+
changeGranted={props.changeGranted}
|
|
35
92
|
/>
|
|
36
93
|
</div>
|
|
37
94
|
|
|
38
|
-
|
|
95
|
+
{/* Status message for disabled items */}
|
|
96
|
+
<div className="flex items-center justify-center mb-3">
|
|
39
97
|
{isDisabled && (
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
98
|
+
<div className="flex items-center space-x-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg border border-red-200">
|
|
99
|
+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
100
|
+
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
101
|
+
</svg>
|
|
102
|
+
<span className="font-medium">
|
|
103
|
+
{`No ${props.title} data available to share`}
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
|
|
108
|
+
{selected && !isDisabled && (
|
|
109
|
+
<div className="flex items-center space-x-2 text-sm text-green-600 bg-green-50 px-3 py-2 rounded-lg border border-green-200">
|
|
110
|
+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
111
|
+
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
112
|
+
</svg>
|
|
113
|
+
<span className="font-medium">
|
|
114
|
+
This data will be shared
|
|
115
|
+
</span>
|
|
116
|
+
</div>
|
|
43
117
|
)}
|
|
44
118
|
</div>
|
|
45
119
|
|
|
120
|
+
{/* Description and rewards */}
|
|
46
121
|
{props.descriptions && props.title !== "Avatar" && (
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
122
|
+
<div className="mb-2">
|
|
123
|
+
<p className={`text-sm font-medium ${
|
|
124
|
+
isDisabled ? 'text-gray-400' : 'text-gray-700'
|
|
125
|
+
}`}>
|
|
126
|
+
<span className="text-blue-600 font-semibold">Intent:</span> {props.descriptions}
|
|
127
|
+
</p>
|
|
128
|
+
</div>
|
|
52
129
|
)}
|
|
53
130
|
|
|
54
131
|
{props.rewards && (
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
132
|
+
<div className="mb-2">
|
|
133
|
+
<p className={`text-sm font-medium ${
|
|
134
|
+
isDisabled ? 'text-gray-400' : 'text-gray-700'
|
|
135
|
+
}`}>
|
|
136
|
+
<span className="text-green-600 font-semibold">Rewards:</span> {props.rewards}
|
|
137
|
+
</p>
|
|
138
|
+
</div>
|
|
60
139
|
)}
|
|
61
140
|
</div>
|
|
62
141
|
</div>
|