feat(journal): add ErrorPopup to display full error messages
Introduces an ErrorPopup component that allows users to view the complete error message by clicking on the truncated error text in the JournalInput.
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user