93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { IconX } from "@tabler/icons-solidjs";
|
|
import type { UserImage } from "../../network";
|
|
import { Show, type Component } from "solid-js";
|
|
import SolidjsMarkdown from "solidjs-markdown";
|
|
|
|
type Props = {
|
|
item: UserImage;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const NullableParagraph: Component<{
|
|
item: string | null;
|
|
itemTitle: string;
|
|
}> = (props) => {
|
|
return (
|
|
<Show when={props.item}>
|
|
{(item) => (
|
|
<>
|
|
<p class="font-semibold text-xl">{props.itemTitle}</p>
|
|
<p class="text-md">{item()}</p>
|
|
</>
|
|
)}
|
|
</Show>
|
|
);
|
|
};
|
|
|
|
export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
|
|
switch (props.item.type) {
|
|
case "note":
|
|
return (
|
|
<SolidjsMarkdown>
|
|
{props.item.data.Content.slice(
|
|
"```markdown".length,
|
|
props.item.data.Content.length - "```".length,
|
|
)}
|
|
</SolidjsMarkdown>
|
|
);
|
|
case "location":
|
|
return (
|
|
<div class="flex flex-col gap-2">
|
|
<p class="font-semibold text-xl">Address</p>
|
|
<p class="text-md">{props.item.data.Address}</p>
|
|
</div>
|
|
);
|
|
case "event":
|
|
return (
|
|
<div class="flex flex-col gap-2">
|
|
<p class="font-semibold text-xl">Event</p>
|
|
<p class="text-md">{props.item.data.Name}</p>
|
|
|
|
<NullableParagraph
|
|
itemTitle="Start Time"
|
|
item={props.item.data.StartDateTime}
|
|
/>
|
|
<NullableParagraph
|
|
itemTitle="End Time"
|
|
item={props.item.data.EndDateTime}
|
|
/>
|
|
</div>
|
|
);
|
|
case "contact":
|
|
return (
|
|
<div class="flex flex-col gap-2">
|
|
<p class="font-semibold text-xl">Contact</p>
|
|
<p class="text-md">{props.item.data.Name}</p>
|
|
|
|
<NullableParagraph itemTitle="Email" item={props.item.data.Email} />
|
|
|
|
<NullableParagraph
|
|
itemTitle="Phone Number"
|
|
item={props.item.data.PhoneNumber}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export const ItemModal: Component<Props> = (props) => {
|
|
return (
|
|
<div class="fixed z-10 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">
|
|
<ConcreteItemModal item={props.item} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|