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

feat(search): enhance Search component with shortcuts and item modal

Browse Source 
- 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.
This commit is contained in:
Dmytro Kondakov
2025-04-14 10:03:37 +02:00
parent 55614b34c7
commit 18f85a8929
8 changed files with 133 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,25 @@
export const ItemModal = () => {
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-4 bg-white border border-neutral-300">
ItemModal
<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>
);
};

14
frontend/src/components/search-card/SearchCardContact.tsx
View File

@@ -12,13 +12,15 @@ export const SearchCardContact = ({ item }: Props) => {
return (
<div class="absolute inset-0 p-3 bg-orange-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
<IconUser size={20} class="text-neutral-500 mt-1" />
<div class="flex mb-1 items-center gap-1">
<IconUser size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Contact</p>
</div>
<p class="text-xs text-neutral-500">{data.PhoneNumber}</p>
<Separator class="my-2" />
<p class="text-xs text-neutral-500">{data.Email}</p>
<p class="text-sm text-neutral-900 font-bold mb-1">
{data.Name.length > 0 ? data.Name : "Unknown 🐞"}
</p>
<p class="text-xs text-neutral-700">Phone: {data.PhoneNumber}</p>
<p class="text-xs text-neutral-700">Mail: {data.Email}</p>
</div>
);
};

11
frontend/src/components/search-card/SearchCardEvent.tsx
View File

@@ -10,11 +10,14 @@ export const SearchCardEvent = ({ item }: Props) => {
return (
<div class="absolute inset-0 p-3 bg-purple-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
<IconCalendar size={20} class="text-neutral-500 mt-1" />
<div class="flex mb-1 items-center gap-1">
<IconCalendar size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Event</p>
</div>
<p class="text-xs text-neutral-500">
<p class="text-sm text-neutral-900 font-bold mb-1">
{data.Name.length > 0 ? data.Name : "Unknown 🐞"}
</p>
<p class="text-xs text-neutral-700">
Organized by {data.Organizer?.Name ?? "unknown"} on{" "}
{data.StartDateTime
? new Date(data.StartDateTime).toLocaleDateString("en-US", {

11
frontend/src/components/search-card/SearchCardLocation.tsx
View File

@@ -10,11 +10,14 @@ export const SearchCardLocation = ({ item }: Props) => {
return (
<div class="absolute inset-0 p-3 bg-red-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
<IconMapPin size={20} class="text-neutral-500 mt-1" />
<div class="flex mb-1 items-center gap-1">
<IconMapPin size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Location</p>
</div>
<p class="text-xs text-neutral-500">{data.Address}</p>
<p class="text-sm text-neutral-900 font-bold mb-1">
{data.Name.length > 0 ? data.Name : "Unknown 🐞"}
</p>
<p class="text-xs text-neutral-700">Address: {data.Address}</p>
</div>
);
};

14
frontend/src/components/search-card/SearchCardNote.tsx
View File

@@ -1,4 +1,5 @@
import { Separator } from "@kobalte/core/separator";
import SolidjsMarkdown from "solidjs-markdown";
import { IconNote } from "@tabler/icons-solidjs";
import type { UserImage } from "../../network";
@@ -12,11 +13,16 @@ export const SearchCardNote = ({ item }: Props) => {
return (
<div class="absolute inset-0 p-3 bg-green-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
<IconNote size={20} class="text-neutral-500 mt-1" />
<div class="flex mb-1 items-center gap-1">
<IconNote size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Note</p>
</div>
<p class="text-xs text-neutral-500">Note</p>
<p class="text-sm text-neutral-900 font-bold mb-1">
{data.Name.length > 0 ? data.Name : "Unknown 🐞"}
</p>
<p class="text-xs text-neutral-700">
<SolidjsMarkdown>{data.Content}</SolidjsMarkdown>
</p>
</div>
);
};