feat: better UI when clicking on cards

frontend/src/components/item-modal/ItemModal.tsx

@@ -1,12 +1,84 @@
 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;
 };
 
-export const ItemModal = (props: Props) => {
+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<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">
@@ -16,9 +88,7 @@ export const ItemModal = (props: Props) => {
                 </button>
             </div>
             <div class="flex flex-col gap-2 mb-2">
-                <p class="text-sm text-neutral-500">
+                <ConcreteItemModal item={props.item} />
-                    {JSON.stringify(props.item.data, null, 2)}
-                </p>
             </div>
         </div>
     );

frontend/src/components/search-card/SearchCard.tsx

@@ -6,7 +6,6 @@ import { SearchCardNote } from "./SearchCardNote";
 
 export const SearchCard = (props: { item: UserImage }) => {
     const { item } = props;
-    console.log(item);
 
     switch (item.type) {
         case "location":