JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: navigation for image and entities instead of a modal

Browse Source
This commit is contained in:
John Costa
2025-07-18 13:48:06 +01:00
parent 16b43ec561
commit 00e530df4b
4 changed files with 122 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
frontend/src/components/item-modal/ItemModal.tsx
View File

@@ -4,92 +4,89 @@ import { Show, type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";
type Props = {
item: UserImage;
onClose: () => void;
item: UserImage;
onClose: () => void;
};
const NullableParagraph: Component<{
item: string | null;
itemTitle: string;
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>
);
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>
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="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="Email" item={props.item.data.Email} />
<NullableParagraph
itemTitle="Phone Number"
item={props.item.data.PhoneNumber}
/>
</div>
);
}
<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>
);
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>
);
};

8
frontend/src/components/search-card/SearchCard.tsx
View File

@@ -1,3 +1,4 @@
import { A } from "@solidjs/router";
import type { UserImage } from "../../network";
import { SearchCardContact } from "./SearchCardContact";
import { SearchCardEvent } from "./SearchCardEvent";
@@ -23,8 +24,11 @@ const UnwrappedSearchCard = (props: { item: UserImage }) => {
export const SearchCard = (props: { item: UserImage }) => {
return (
<div class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl">
<A
href={`/entity/${props.item.data.ID}`}
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
>
<UnwrappedSearchCard item={props.item} />
</div>
</A>
);
};