Sacha Weatherstone
4 years ago
71 changed files with 1697 additions and 1282 deletions
File diff suppressed because it is too large
@ -0,0 +1,21 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { m } from 'framer-motion'; |
|||
|
|||
export interface CardProps { |
|||
className?: string; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const Card = ({ className, children }: CardProps): JSX.Element => { |
|||
return ( |
|||
<m.div |
|||
className={`flex select-none rounded-md bg-white p-4 shadow-md dark:bg-primaryDark ${className}`} |
|||
initial={{ opacity: 0 }} |
|||
animate={{ opacity: 1 }} |
|||
exit={{ opacity: 0 }} |
|||
> |
|||
{children} |
|||
</m.div> |
|||
); |
|||
}; |
|||
@ -1,10 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
export interface CoverProps { |
|||
content: JSX.Element; |
|||
enabled: boolean; |
|||
} |
|||
|
|||
export const Cover = ({ content, enabled }: CoverProps): JSX.Element => { |
|||
return enabled ? <div className="m-4 ">{content}</div> : <></>; |
|||
}; |
|||
@ -1,46 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { IconButton } from '@meshtastic/components'; |
|||
|
|||
export interface ListItemProps { |
|||
selected: boolean; |
|||
selectedIcon: JSX.Element; |
|||
actions?: JSX.Element; |
|||
status: JSX.Element; |
|||
onClick?: () => void; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const ListItem = ({ |
|||
selected, |
|||
selectedIcon, |
|||
actions, |
|||
status, |
|||
onClick, |
|||
children, |
|||
}: ListItemProps): JSX.Element => { |
|||
return ( |
|||
<div |
|||
onClick={(): void => { |
|||
onClick && onClick(); |
|||
}} |
|||
className={`flex select-none rounded-md border bg-gray-100 shadow-md dark:bg-primaryDark ${ |
|||
selected |
|||
? 'border-primary dark:border-primary' |
|||
: 'border-gray-100 dark:border-primaryDark' |
|||
}`}
|
|||
> |
|||
<div className="w-3 rounded-l-md bg-green-500" /> |
|||
<div className="flex justify-between p-2"> |
|||
<div className="my-auto flex space-x-2"> |
|||
{status} |
|||
<div className="flex gap-2">{children}</div> |
|||
</div> |
|||
<div className="flex gap-2"> |
|||
{actions} |
|||
<IconButton active={selected} icon={selectedIcon} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,9 @@ |
|||
import type React from 'react'; |
|||
|
|||
export const Loading = (): JSX.Element => { |
|||
return ( |
|||
<div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-blur-sm backdrop-filter"> |
|||
<div className="m-auto text-lg font-medium text-gray-400">Loading</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,19 @@ |
|||
import 'tippy.js/dist/tippy.css'; |
|||
|
|||
import type React from 'react'; |
|||
|
|||
import cuid from 'cuid'; |
|||
|
|||
import Tippy, { TippyProps } from '@tippyjs/react'; |
|||
|
|||
export const Tooltip = ({ |
|||
children, |
|||
content, |
|||
...props |
|||
}: TippyProps): JSX.Element => { |
|||
return ( |
|||
<Tippy content={content} {...props}> |
|||
<div key={cuid()}>{children}</div> |
|||
</Tippy> |
|||
); |
|||
}; |
|||
@ -0,0 +1,73 @@ |
|||
import React from 'react'; |
|||
|
|||
import { FiCheck } from 'react-icons/fi'; |
|||
|
|||
type DefaultButtonProps = JSX.IntrinsicElements['button']; |
|||
|
|||
export enum ButtonSize { |
|||
Small = 'small', |
|||
Medium = 'medium', |
|||
Large = 'large', |
|||
} |
|||
|
|||
export interface ButtonProps extends DefaultButtonProps { |
|||
icon?: JSX.Element; |
|||
active?: boolean; |
|||
border?: boolean; |
|||
size?: ButtonSize; |
|||
confirmAction?: () => void; |
|||
} |
|||
|
|||
export const Button = ({ |
|||
icon, |
|||
className, |
|||
active, |
|||
border, |
|||
size = ButtonSize.Medium, |
|||
confirmAction, |
|||
disabled, |
|||
children, |
|||
...props |
|||
}: ButtonProps): JSX.Element => { |
|||
const [hasConfirmed, setHasConfirmed] = React.useState(false); |
|||
|
|||
const handleConfirm = (): void => { |
|||
if (typeof confirmAction == 'function') { |
|||
if (hasConfirmed) { |
|||
void confirmAction(); |
|||
} |
|||
setHasConfirmed(true); |
|||
setTimeout(() => { |
|||
setHasConfirmed(false); |
|||
}, 3000); |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<button |
|||
onClick={handleConfirm} |
|||
className={`flex select-none items-center space-x-3 rounded-md border border-transparent text-sm transition duration-200 ease-in-out focus-within:border-primary focus-within:shadow-border active:scale-95 dark:text-white dark:focus-within:border-primary
|
|||
${ |
|||
size === ButtonSize.Small |
|||
? 'p-0' |
|||
: size === ButtonSize.Medium |
|||
? 'p-2' |
|||
: 'p-4' |
|||
} |
|||
${ |
|||
disabled |
|||
? 'cursor-not-allowed bg-white dark:bg-primaryDark' |
|||
: 'cursor-pointer hover:bg-gray-100 hover:shadow-md dark:hover:bg-secondaryDark' |
|||
} ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${className}`}
|
|||
{...props} |
|||
> |
|||
{icon && ( |
|||
<div className="text-gray-500 dark:text-gray-400"> |
|||
{hasConfirmed ? <FiCheck /> : icon} |
|||
</div> |
|||
)} |
|||
|
|||
<span>{children}</span> |
|||
</button> |
|||
); |
|||
}; |
|||
@ -0,0 +1,35 @@ |
|||
import type React from 'react'; |
|||
|
|||
type DefaulButtonProps = JSX.IntrinsicElements['button']; |
|||
|
|||
export interface IconButtonProps extends DefaulButtonProps { |
|||
icon: React.ReactNode; |
|||
active?: boolean; |
|||
} |
|||
|
|||
export const IconButton = ({ |
|||
icon, |
|||
active, |
|||
disabled, |
|||
...props |
|||
}: IconButtonProps): JSX.Element => { |
|||
return ( |
|||
<div className="my-auto text-gray-500 dark:text-gray-400"> |
|||
<button |
|||
type="button" |
|||
disabled={disabled} |
|||
className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${ |
|||
active |
|||
? 'bg-gray-200 dark:bg-gray-600' |
|||
: 'hover:bg-gray-200 dark:hover:bg-gray-600' |
|||
} ${ |
|||
disabled ? 'cursor-not-allowed text-gray-400 dark:text-gray-700' : '' |
|||
}`}
|
|||
{...props} |
|||
> |
|||
{icon} |
|||
<span className="sr-only">Refresh</span> |
|||
</button> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,48 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Label } from '@components/generic/form/Label'; |
|||
|
|||
type DefaultInputProps = JSX.IntrinsicElements['input']; |
|||
|
|||
export interface CheckboxProps extends DefaultInputProps { |
|||
action?: (enabled: boolean) => void; |
|||
label: string; |
|||
valid?: boolean; |
|||
validationMessage?: string; |
|||
error?: boolean; |
|||
} |
|||
|
|||
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>( |
|||
function Input( |
|||
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps, |
|||
ref, |
|||
) { |
|||
return ( |
|||
<div className="flex w-full flex-col"> |
|||
<Label label={label} /> |
|||
<div className="ml-auto"> |
|||
<input |
|||
ref={ref} |
|||
type="checkbox" |
|||
id={id} |
|||
className={`h-8 w-8 appearance-none rounded-md border border-gray-400 transition duration-200 ease-in-out checked:border-transparent checked:bg-primary focus-within:shadow-border focus:outline-none dark:border-gray-200 ${ |
|||
props.disabled |
|||
? 'border-gray-400 bg-gray-300 text-gray-500 dark:border-gray-700 dark:bg-secondaryDark dark:text-gray-400' |
|||
: '' |
|||
} ${ |
|||
error |
|||
? 'border-red-500' |
|||
: props.disabled |
|||
? 'border-gray-200' |
|||
: 'focus-within:border-primary hover:border-primary dark:focus-within:border-primary dark:hover:border-primary' |
|||
}`}
|
|||
{...props} |
|||
/> |
|||
</div> |
|||
{!valid && ( |
|||
<div className="text-sm text-gray-600">{validationMessage}</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -0,0 +1,37 @@ |
|||
import React from 'react'; |
|||
|
|||
import { InputWrapper } from '@components/generic/form/InputWrapper'; |
|||
import { Label } from '@components/generic/form/Label'; |
|||
|
|||
type DefaultInputProps = JSX.IntrinsicElements['input']; |
|||
|
|||
export interface InputProps extends DefaultInputProps { |
|||
label?: string; |
|||
error?: string; |
|||
action?: JSX.Element; |
|||
prefix?: string; |
|||
suffix?: string; |
|||
} |
|||
|
|||
export const Input = React.forwardRef<HTMLInputElement, InputProps>( |
|||
function Input({ label, error, action, suffix, ...props }: InputProps, ref) { |
|||
return ( |
|||
<div className="w-full"> |
|||
{label && <Label label={label} error={error} />} |
|||
<InputWrapper error={error} disabled={props.disabled}> |
|||
<input |
|||
ref={ref} |
|||
className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white" |
|||
{...props} |
|||
/> |
|||
{suffix && ( |
|||
<span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400"> |
|||
{suffix} |
|||
</span> |
|||
)} |
|||
{action && <div className="mr-1 flex">{action}</div>} |
|||
</InputWrapper> |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -0,0 +1,29 @@ |
|||
import type React from 'react'; |
|||
|
|||
export interface LabelProps { |
|||
error?: string; |
|||
disabled?: boolean; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const InputWrapper = ({ |
|||
error, |
|||
disabled, |
|||
children, |
|||
}: LabelProps): JSX.Element => ( |
|||
<div |
|||
className={`flex w-full rounded-md border border-gray-400 transition duration-200 ease-in-out dark:border-gray-200 ${ |
|||
disabled |
|||
? 'border-gray-400 bg-gray-300 text-gray-500 dark:border-gray-700 dark:bg-secondaryDark dark:text-gray-400' |
|||
: '' |
|||
} ${ |
|||
error |
|||
? 'border-red-500 dark:border-red-500' |
|||
: disabled |
|||
? '' |
|||
: ' focus-within:border-primary focus-within:shadow-border hover:border-primary dark:focus-within:border-primary dark:hover:border-primary' |
|||
}`}
|
|||
> |
|||
{children} |
|||
</div> |
|||
); |
|||
@ -0,0 +1,68 @@ |
|||
import React from 'react'; |
|||
|
|||
import { InputWrapper } from '@components/generic/form/InputWrapper'; |
|||
import { Label } from '@components/generic/form/Label'; |
|||
|
|||
type DefaultSelectProps = JSX.IntrinsicElements['select']; |
|||
|
|||
export interface SelectProps extends DefaultSelectProps { |
|||
options?: { |
|||
name: string | number; |
|||
value: string | number; |
|||
}[]; |
|||
optionsEnum?: { [s: string]: string | number }; |
|||
label?: string; |
|||
error?: string; |
|||
small?: boolean; |
|||
} |
|||
|
|||
export const Select = React.forwardRef<HTMLSelectElement, SelectProps>( |
|||
({ options, optionsEnum, label, error, small, ...props }, ref) => { |
|||
const optionsEnumValues = optionsEnum |
|||
? Object.entries(optionsEnum).filter( |
|||
(value) => typeof value[1] === 'number', |
|||
) |
|||
: []; |
|||
return ( |
|||
<div> |
|||
{label && <Label label={label} error={error} />} |
|||
<InputWrapper error={error} disabled={props.disabled}> |
|||
<select |
|||
ref={ref} |
|||
className={`w-full rounded-md bg-transparent focus:border-primary focus:outline-none disabled:cursor-not-allowed dark:text-white ${ |
|||
small ? 'm-1' : 'mx-2 h-10' |
|||
}`}
|
|||
disabled={ |
|||
props.disabled |
|||
? true |
|||
: !(optionsEnumValues.length || options?.length) |
|||
} |
|||
{...props} |
|||
> |
|||
{!(optionsEnumValues.length || options?.length) && ( |
|||
<option key="loading" className="dark:bg-gray-700"> |
|||
Loading |
|||
</option> |
|||
)} |
|||
{optionsEnumValues.length && |
|||
optionsEnumValues.map(([name, value], index) => ( |
|||
<option key={index} className="dark:bg-gray-700" value={value}> |
|||
{name} |
|||
</option> |
|||
))} |
|||
{options && |
|||
options.map((option, index) => ( |
|||
<option |
|||
key={index} |
|||
className="dark:bg-gray-700" |
|||
value={option.value} |
|||
> |
|||
{option.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
</InputWrapper> |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -1,31 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { useAppSelector } from '@app/hooks/useAppSelector'; |
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
|
|||
export const ExternalNotificationsDebugPanel = (): JSX.Element => { |
|||
const preferences = useAppSelector( |
|||
(state) => state.meshtastic.radio.preferences, |
|||
); |
|||
|
|||
const debugData = { |
|||
extNotificationPluginActive: preferences.extNotificationPluginActive, |
|||
extNotificationPluginAlertBell: preferences.extNotificationPluginAlertBell, |
|||
extNotificationPluginAlertMessage: |
|||
preferences.extNotificationPluginAlertMessage, |
|||
extNotificationPluginEnabled: preferences.extNotificationPluginEnabled, |
|||
extNotificationPluginOutput: preferences.extNotificationPluginOutput, |
|||
extNotificationPluginOutputMs: preferences.extNotificationPluginOutputMs, |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(debugData)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={debugData} /> |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,27 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { useAppSelector } from '@app/hooks/useAppSelector'; |
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
|
|||
export const RangeTestDebugPanel = (): JSX.Element => { |
|||
const preferences = useAppSelector( |
|||
(state) => state.meshtastic.radio.preferences, |
|||
); |
|||
|
|||
const debugData = { |
|||
rangeTestPluginEnabled: preferences.rangeTestPluginEnabled, |
|||
rangeTestPluginSave: preferences.rangeTestPluginSave, |
|||
rangeTestPluginSender: preferences.rangeTestPluginSender, |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(debugData)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={debugData} /> |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,30 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { useAppSelector } from '@app/hooks/useAppSelector'; |
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
|
|||
export const SerialDebugPanel = (): JSX.Element => { |
|||
const preferences = useAppSelector( |
|||
(state) => state.meshtastic.radio.preferences, |
|||
); |
|||
|
|||
const debugData = { |
|||
serialpluginEnabled: preferences.serialpluginEnabled, |
|||
serialpluginEcho: preferences.serialpluginEcho, |
|||
serialpluginMode: preferences.serialpluginMode, |
|||
serialpluginRxd: preferences.serialpluginRxd, |
|||
serialpluginTxd: preferences.serialpluginTxd, |
|||
serialpluginTimeout: preferences.serialpluginTimeout, |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(debugData)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={debugData} /> |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,31 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { useAppSelector } from '@app/hooks/useAppSelector'; |
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
|
|||
export const StoreForwardDebugPanel = (): JSX.Element => { |
|||
const preferences = useAppSelector( |
|||
(state) => state.meshtastic.radio.preferences, |
|||
); |
|||
|
|||
const debugData = { |
|||
storeForwardPluginEnabled: preferences.storeForwardPluginEnabled, |
|||
storeForwardPluginHeartbeat: preferences.storeForwardPluginHeartbeat, |
|||
storeForwardPluginRecords: preferences.storeForwardPluginRecords, |
|||
storeForwardPluginHistoryReturnMax: |
|||
preferences.storeForwardPluginHistoryReturnMax, |
|||
storeForwardPluginHistoryReturnWindow: |
|||
preferences.storeForwardPluginHistoryReturnWindow, |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(debugData)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={debugData} /> |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,21 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
import type { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface DebugPanelProps { |
|||
channel: Protobuf.Channel; |
|||
} |
|||
|
|||
export const DebugPanel = ({ channel }: DebugPanelProps): JSX.Element => { |
|||
return ( |
|||
<> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(channel)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={channel} /> |
|||
</> |
|||
); |
|||
}; |
|||
@ -1,20 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import QRCode from 'react-qr-code'; |
|||
|
|||
import type { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface QRCodePanelProps { |
|||
channel: Protobuf.Channel; |
|||
} |
|||
|
|||
export const QRCodePanel = ({ channel }: QRCodePanelProps): JSX.Element => { |
|||
return ( |
|||
<div className="m-auto"> |
|||
<QRCode |
|||
className="rounded-md" |
|||
value={`https://www.meshtastic.org/d/#${channel.index}`} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,56 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi'; |
|||
|
|||
import { connType, openConnectionModal } from '@core/slices/appSlice'; |
|||
import { useAppDispatch } from '@hooks/useAppDispatch'; |
|||
import { useAppSelector } from '@hooks/useAppSelector'; |
|||
import { Button } from '@meshtastic/components'; |
|||
import { Types } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export const DeviceStatus = (): JSX.Element => { |
|||
const dispatch = useAppDispatch(); |
|||
const appState = useAppSelector((state) => state.app); |
|||
const state = useAppSelector((state) => state.meshtastic); |
|||
|
|||
return ( |
|||
<Button |
|||
active |
|||
onClick={(): void => { |
|||
dispatch(dispatch(openConnectionModal())); |
|||
}} |
|||
> |
|||
<div className="flex gap-2 px-2"> |
|||
<div |
|||
className={` |
|||
my-auto h-2 w-2 min-w-[2] rounded-full ${ |
|||
[ |
|||
Types.DeviceStatusEnum.DEVICE_CONNECTED, |
|||
Types.DeviceStatusEnum.DEVICE_CONFIGURED, |
|||
].includes(state.deviceStatus) |
|||
? 'bg-green-400' |
|||
: [ |
|||
Types.DeviceStatusEnum.DEVICE_CONNECTING, |
|||
Types.DeviceStatusEnum.DEVICE_RECONNECTING, |
|||
Types.DeviceStatusEnum.DEVICE_CONFIGURING, |
|||
].includes(state.deviceStatus) |
|||
? 'bg-yellow-400' |
|||
: 'bg-gray-400' |
|||
}`}
|
|||
></div> |
|||
<div className="my-auto"> |
|||
{state.nodes.find( |
|||
(node) => node.number === state.radio.hardware.myNodeNum, |
|||
)?.user?.longName ?? 'Disconnected'} |
|||
</div> |
|||
{appState.connType === connType.BLE ? ( |
|||
<FiBluetooth className="h-5 w-5" /> |
|||
) : appState.connType === connType.SERIAL ? ( |
|||
<FiCpu className="h-5 w-5" /> |
|||
) : ( |
|||
<FiWifi className="h-5 w-5" /> |
|||
)} |
|||
</div> |
|||
</Button> |
|||
); |
|||
}; |
|||
@ -1,21 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
import type { Node } from '@core/slices/meshtasticSlice'; |
|||
|
|||
export interface DebugPanelProps { |
|||
node: Node; |
|||
} |
|||
|
|||
export const DebugPanel = ({ node }: DebugPanelProps): JSX.Element => { |
|||
return ( |
|||
<div className="relative"> |
|||
<div className="fixed right-0 m-2"> |
|||
<CopyButton data={JSON.stringify(node)} /> |
|||
</div> |
|||
<JSONPretty className="max-w-sm" data={node} /> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,32 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { CopyButton } from '@components/menu/buttons/CopyButton'; |
|||
import type { Node } from '@core/slices/meshtasticSlice'; |
|||
|
|||
export interface PositionPanelProps { |
|||
node: Node; |
|||
} |
|||
|
|||
export const PositionPanel = ({ node }: PositionPanelProps): JSX.Element => { |
|||
return ( |
|||
<div className="p-2"> |
|||
{node.currentPosition && ( |
|||
<div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 "> |
|||
<div className="my-auto px-1"> |
|||
{(node.currentPosition.latitudeI / 1e7).toPrecision(6)}, |
|||
{(node.currentPosition?.longitudeI / 1e7).toPrecision(6)} |
|||
</div> |
|||
<CopyButton |
|||
data={ |
|||
node.currentPosition |
|||
? `${node.currentPosition.latitudeI / 1e7},${ |
|||
node.currentPosition.longitudeI / 1e7 |
|||
}` |
|||
: '' |
|||
} |
|||
/> |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue