blob: e8157abe943d9ae9b1b53d29b2c5289b09cecc2f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import { AlertTriangle, Clock, LocateIcon } from "lucide-react";
import React from "react";
import { useTranslation } from "react-i18next";
import { Sheet } from "react-modal-sheet";
interface StopHelpModalProps {
isOpen: boolean;
onClose: () => void;
}
export const StopHelpModal: React.FC<StopHelpModalProps> = ({
isOpen,
onClose,
}) => {
const { t } = useTranslation();
return (
<Sheet isOpen={isOpen} onClose={onClose} detent="content">
<Sheet.Container className="bg-white! dark:bg-black! !rounded-t-[20px]">
<Sheet.Header className="bg-white! dark:bg-black! !rounded-t-[20px]" />
<Sheet.Content>
<div className="p-6 pb-10 flex flex-col gap-8 overflow-y-auto max-h-[80vh] text-slate-900 dark:text-slate-100">
<div>
<h2 className="text-xl font-bold mb-4">{t("stop_help.title")}</h2>
<div className="space-y-5">
<div className="flex gap-4 items-start">
<div className="w-10 h-10 rounded-full bg-green-600/20 flex items-center justify-center shrink-0 mt-0.5">
<Clock className="w-6 h-6 text-green-700 dark:text-green-400" />
</div>
<div>
<h3 className="font-semibold text-green-700 dark:text-green-400 text-base">
{t("stop_help.realtime_ok")}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
{t("stop_help.realtime_ok_desc")}
</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-10 h-10 rounded-full bg-orange-600/20 flex items-center justify-center shrink-0 mt-0.5">
<AlertTriangle className="w-6 h-6 text-orange-700 dark:text-orange-400" />
</div>
<div>
<h3 className="font-semibold text-orange-700 dark:text-orange-400 text-base">
{t("stop_help.realtime_warning")}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
{t("stop_help.realtime_warning_desc")}
</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-10 h-10 rounded-full bg-blue-900/20 flex items-center justify-center shrink-0 mt-0.5">
<Clock className="w-6 h-6 text-blue-900 dark:text-blue-400" />
</div>
<div>
<h3 className="font-semibold text-blue-900 dark:text-blue-400 text-base">
{t("stop_help.scheduled")}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
{t("stop_help.scheduled_desc")}
</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center shrink-0 mt-0.5">
<LocateIcon className="w-6 h-6 text-slate-700 dark:text-slate-300" />
</div>
<div>
<h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base">
{t("stop_help.gps")}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
{t("stop_help.gps_desc")}
</p>
</div>
</div>
</div>
</div>
<div>
<h2 className="text-lg font-bold mb-4">
{t("stop_help.punctuality")}
</h2>
<div className="space-y-3">
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-600/20 dark:bg-green-600/30 text-green-700 dark:text-green-300 shrink-0">
{t("stop_help.punctuality_ontime_label", "En hora")}
</span>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t("stop_help.punctuality_ontime")}
</p>
</div>
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300 shrink-0">
{t("stop_help.punctuality_early_label", "Adelanto")}
</span>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t("stop_help.punctuality_early")}
</p>
</div>
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-600/20 dark:bg-yellow-600/30 text-amber-700 dark:text-yellow-300 shrink-0">
{t("stop_help.punctuality_late_label", "Retraso")}
</span>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t("stop_help.punctuality_late")}
</p>
</div>
</div>
</div>
<div>
<h2 className="text-lg font-bold mb-4">
{t("stop_help.gps_quality")}
</h2>
<div className="space-y-3">
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded-full text-xs font-medium shrink-0">
{t("stop_help.gps_reliable_label", "GPS fiable")}
</span>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t("stop_help.gps_reliable")}
</p>
</div>
<div className="flex items-center gap-3">
<span className="px-2 py-0.5 rounded-full text-xs font-medium shrink-0">
{t("stop_help.gps_imprecise_label", "GPS impreciso")}
</span>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t("stop_help.gps_imprecise")}
</p>
</div>
</div>
</div>
</div>
</Sheet.Content>
</Sheet.Container>
<Sheet.Backdrop onTap={onClose} />
</Sheet>
);
};
|
