43e63f739a
- Added functionality to fetch and display global shortcuts in the Search component. - Introduced ItemModal for displaying detailed information about selected items. - Updated SearchCard components to improve layout and information presentation. - Enhanced user experience with better styling and accessibility features.
26 lines
833 B
TypeScript
26 lines
833 B
TypeScript
import { IconX } from "@tabler/icons-solidjs";
|
|
import type { UserImage } from "../../network";
|
|
|
|
type Props = {
|
|
item: UserImage;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export const ItemModal = (props: Props) => {
|
|
return (
|
|
<div class="fixed inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
|
|
<div class="flex justify-between">
|
|
<h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
|
|
<button type="button" onClick={props.onClose}>
|
|
<IconX size={24} class="text-neutral-500" />
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-2 mb-2">
|
|
<p class="text-sm text-neutral-500">
|
|
{JSON.stringify(props.item.data, null, 2)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|