blob: f1356e6a5784f39e34134768f39e9db09f2f1af9 (
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
|
import React, { useMemo } from "react";
import { AlertCircle, AlertOctagon, Info, TriangleAlert } from "lucide-react";
import type { Stop } from "~/data/StopDataProvider";
import "./StopAlert.css";
interface StopAlertProps {
stop: Stop;
compact?: boolean;
}
export const StopAlert: React.FC<StopAlertProps> = ({
stop,
compact = false,
}) => {
// Don't render anything if there's no alert content
const hasContent = stop.title || stop.message;
if (!hasContent) {
return null;
}
const alertType = useMemo(() => {
if (stop.alert === "error") return "stop-alert-error";
if (stop.alert === "warning") return "stop-alert-warning";
return "stop-alert-info";
}, [stop.alert]);
const alertIcon = useMemo(() => {
if (stop.alert === "error") return <AlertOctagon />;
if (stop.alert === "warning") return <TriangleAlert />;
return <Info />;
}, [stop.alert]);
return (
<<<<<<< HEAD
<div className={`stop-alert ${alertType} ${compact ? 'stop-alert-compact' : ''}`}>
{alertIcon}
<div className="stop-alert-content">
{stop.title && <div className="stop-alert-title">{stop.title}</div>}
{stop.message && <div className="stop-alert-message">{stop.message}</div>}
=======
<div
className={`stop-alert ${isError ? "stop-alert-error" : "stop-alert-info"} ${compact ? "stop-alert-compact" : ""}`}
>
<div className="stop-alert-icon">
{isError ? <AlertCircle /> : <Info />}
</div>
<div className="stop-alert-content">
{stop.title && <div className="stop-alert-title">{stop.title}</div>}
{stop.message && (
<div className="stop-alert-message">{stop.message}</div>
)}
{stop.alternateCodes && stop.alternateCodes.length > 0 && (
<div className="stop-alert-alternate-codes">
Alternative stops: {stop.alternateCodes.join(", ")}
</div>
)}
>>>>>>> 88e0621 (Improve gallery scroll indicators and format code)
</div>
</div>
);
};
|
