83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import type { UserImage } from "../../network";
|
|
import { Show, type Component } from "solid-js";
|
|
import SolidjsMarkdown from "solidjs-markdown";
|
|
|
|
type Props = {
|
|
item: UserImage;
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
const ConcreteItemModal: Component<Props> = (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="rounded-2xl p-4 bg-white border border-neutral-300 flex flex-col gap-2 mb-2">
|
|
<ConcreteItemModal item={props.item} />
|
|
</div>
|
|
);
|
|
};
|