style map threat info element
This commit is contained in:
parent
51b165e7e1
commit
f632bf761c
@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<title>React Redux App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -6,9 +6,12 @@ import { capitalizeFirstLetter as cfl } from 'src/utils/helpers';
|
||||
|
||||
type Props = {
|
||||
element: InformationElement;
|
||||
inGaze: boolean;
|
||||
};
|
||||
|
||||
const MapThreatInfoElement = ({ element }: Props) => {
|
||||
const M_HEIGHT = 60;
|
||||
|
||||
const MapThreatInfoElement = ({ element, inGaze }: Props) => {
|
||||
const dispatch = useAppDispatch();
|
||||
// could also fetch messages from redux
|
||||
// provided there is a conversation number
|
||||
@ -105,6 +108,40 @@ const MapThreatInfoElement = ({ element }: Props) => {
|
||||
};
|
||||
|
||||
return <>{renderElement()}</>;
|
||||
// return (
|
||||
// <div
|
||||
// id={element.id}
|
||||
// className="rounded-xl bg-[#282828] bg-opacity-80 text-[#f5f5f5] border-black border-2 text-[24px]"
|
||||
// style={{
|
||||
// height: M_HEIGHT,
|
||||
// width: 'auto',
|
||||
// }}
|
||||
// >
|
||||
// <div className="px-5 py-2.5 font-medium" style={{ height: M_HEIGHT }}>
|
||||
// {title}
|
||||
// </div>
|
||||
// {inGaze ? <GazeHighlight /> : <></>}
|
||||
// </div>
|
||||
// );
|
||||
};
|
||||
|
||||
const GazeHighlight = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="w-auto rounded-xl border-[#19DEBB] border-x-[5px]"
|
||||
style={{ height: M_HEIGHT - 4, marginTop: -M_HEIGHT }}
|
||||
></div>
|
||||
<div className="mx-auto mt-1" style={{ width: 26, height: 13 }}>
|
||||
<svg style={{ width: 26, height: 15 }}>
|
||||
<polygon
|
||||
points="1,1 26,1 14,14"
|
||||
style={{ fill: '#19DEBB', stroke: '#3E3E42', strokeWidth: 2 }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapThreatInfoElement;
|
||||
|
@ -11,7 +11,6 @@ import {
|
||||
import { useEffect, useState } from 'react';
|
||||
import type {
|
||||
IconElement as IconElementType,
|
||||
TextElement as TextElementType,
|
||||
InformationElement as InformationElementType,
|
||||
} from 'src/types/element';
|
||||
import IconElement from 'src/components/Element/Simple/IconElement';
|
||||
@ -44,6 +43,22 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
|
||||
}
|
||||
}, [inGaze, dispatch, iconElement, threatInfoElement, widget]);
|
||||
|
||||
const handleInGaze = () => {
|
||||
if (threatInfoElement) {
|
||||
return (
|
||||
<>
|
||||
<div style={{ height: 2, width: 75, border: '2px dashed white' }} />
|
||||
<MapThreatInfoElement
|
||||
element={threatInfoElement as InformationElementType}
|
||||
inGaze={inGaze}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={widget.id}
|
||||
|
@ -1,5 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
|
||||
const config = {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
@ -8,6 +9,11 @@ export default {
|
||||
// pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
|
||||
// },
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Roboto Condensed', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
Loading…
Reference in New Issue
Block a user