hypercross
b8cfb05e53
Introduces an ErrorPopup component that allows users to view the complete error message by clicking on the truncated error text in the JournalInput.
30 lines
943 B
TypeScript
30 lines
943 B
TypeScript
/**
|
|
* ErrorPopup — shows the full error message in a floating panel above
|
|
* the journal input area. Toggled by clicking the truncated error text.
|
|
*/
|
|
import { Component, Show } from "solid-js";
|
|
|
|
interface ErrorPopupProps {
|
|
message: string | null;
|
|
show: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const ErrorPopup: Component<ErrorPopupProps> = (props) => {
|
|
return (
|
|
<Show when={props.show && props.message}>
|
|
<div class="absolute bottom-full left-2 right-2 mb-1 bg-red-50 border border-red-200 rounded shadow-lg z-50">
|
|
<div class="flex items-start justify-between px-2 pt-2 pb-1">
|
|
<p class="text-red-700 text-xs break-words">{props.message}</p>
|
|
<button
|
|
onClick={props.onClose}
|
|
class="text-red-400 hover:text-red-600 text-xs leading-none ml-2 shrink-0"
|
|
title="关闭"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
);
|
|
}; |