feat: adding button to delete image
This commit is contained in:
@ -1,25 +1,105 @@
|
||||
import { Component } from "solid-js";
|
||||
import { Component, createSignal } from "solid-js";
|
||||
import { base } from "../../network";
|
||||
import { A } from "@solidjs/router";
|
||||
import { Dialog } from "@kobalte/core";
|
||||
|
||||
export const ImageComponent: Component<{ ID: string }> = (props) => {
|
||||
return (
|
||||
<A href={`/image/${props.ID}`} class="w-full flex justify-center h-[300px]">
|
||||
<img
|
||||
class="flex w-full object-cover rounded-xl"
|
||||
src={`${base}/images/${props.ID}`}
|
||||
/>
|
||||
</A>
|
||||
);
|
||||
type ImageComponentProps = {
|
||||
ID: string;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export const ImageComponent: Component<ImageComponentProps> = (props) => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="relative w-full flex justify-center h-[300px]">
|
||||
<A href={`/image/${props.ID}`} class="flex w-full">
|
||||
<img
|
||||
class="flex w-full object-cover rounded-xl"
|
||||
src={`${base}/images/${props.ID}`}
|
||||
/>
|
||||
</A>
|
||||
<button
|
||||
aria-label="Delete image"
|
||||
class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
|
||||
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
|
||||
<Dialog.Title class="text-lg font-bold mb-2">
|
||||
Confirm Delete
|
||||
</Dialog.Title>
|
||||
<Dialog.Description class="mb-4">
|
||||
Are you sure you want to delete this image?
|
||||
</Dialog.Description>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Dialog.CloseButton>
|
||||
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
|
||||
Cancel
|
||||
</button>
|
||||
</Dialog.CloseButton>
|
||||
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => {
|
||||
return (
|
||||
<A href={`/image/${props.ID}`} class="w-full flex justify-center">
|
||||
<img
|
||||
class="flex w-full object-cover rounded-xl"
|
||||
src={`${base}/images/${props.ID}`}
|
||||
/>
|
||||
</A>
|
||||
);
|
||||
export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="relative w-full flex justify-center">
|
||||
<A href={`/image/${props.ID}`} class="flex w-full">
|
||||
<img
|
||||
class="flex w-full object-cover rounded-xl"
|
||||
src={`${base}/images/${props.ID}`}
|
||||
/>
|
||||
</A>
|
||||
<button
|
||||
aria-label="Delete image"
|
||||
class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
|
||||
<Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
|
||||
<Dialog.Title class="text-lg font-bold mb-2">
|
||||
Confirm Delete
|
||||
</Dialog.Title>
|
||||
<Dialog.Description class="mb-4">
|
||||
Are you sure you want to delete this image?
|
||||
</Dialog.Description>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Dialog.CloseButton>
|
||||
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
|
||||
Cancel
|
||||
</button>
|
||||
</Dialog.CloseButton>
|
||||
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,92 +1,91 @@
|
||||
import {
|
||||
type Accessor,
|
||||
type Component,
|
||||
type ParentProps,
|
||||
createContext,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createResource,
|
||||
useContext,
|
||||
type Accessor,
|
||||
type Component,
|
||||
type ParentProps,
|
||||
createContext,
|
||||
createMemo,
|
||||
createResource,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import { getUserImages, JustTheImageWhatAreTheseNames } from "../network";
|
||||
import { deleteImage, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
|
||||
|
||||
export type SearchImageStore = {
|
||||
imagesByDate: Accessor<
|
||||
Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
|
||||
>;
|
||||
imagesByDate: Accessor<
|
||||
Array<{ date: Date; images: JustTheImageWhatAreTheseNames }>
|
||||
>;
|
||||
|
||||
lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>;
|
||||
lists: Accessor<Awaited<ReturnType<typeof getUserImages>>["lists"]>;
|
||||
|
||||
userImages: Accessor<JustTheImageWhatAreTheseNames>;
|
||||
userImages: Accessor<JustTheImageWhatAreTheseNames>;
|
||||
|
||||
processingImages: Accessor<
|
||||
Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined
|
||||
>;
|
||||
processingImages: Accessor<
|
||||
Awaited<ReturnType<typeof getUserImages>>["processingImages"] | undefined
|
||||
>;
|
||||
|
||||
onRefetchImages: () => void;
|
||||
onRefetchImages: () => void;
|
||||
onDeleteImage: (imageID: string) => void;
|
||||
};
|
||||
|
||||
const SearchImageContext = createContext<SearchImageStore>();
|
||||
export const SearchImageContextProvider: Component<ParentProps> = (props) => {
|
||||
const [data, { refetch }] = createResource(getUserImages);
|
||||
const [data, { refetch }] = createResource(getUserImages);
|
||||
|
||||
createEffect(() => {
|
||||
console.log(data());
|
||||
});
|
||||
const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
|
||||
() => {
|
||||
const d = data();
|
||||
if (d == null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
|
||||
() => {
|
||||
const d = data();
|
||||
if (d == null) {
|
||||
return [];
|
||||
}
|
||||
// Sorted by day. But we could potentially add more in the future.
|
||||
const buckets: Record<string, JustTheImageWhatAreTheseNames> = {};
|
||||
|
||||
// Sorted by day. But we could potentially add more in the future.
|
||||
const buckets: Record<string, JustTheImageWhatAreTheseNames> = {};
|
||||
for (const image of d.userImages) {
|
||||
if (image.CreatedAt == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const image of d.userImages) {
|
||||
if (image.CreatedAt == null) {
|
||||
continue;
|
||||
}
|
||||
const date = new Date(image.CreatedAt).toDateString();
|
||||
if (!(date in buckets)) {
|
||||
buckets[date] = [];
|
||||
}
|
||||
|
||||
const date = new Date(image.CreatedAt).toDateString();
|
||||
if (!(date in buckets)) {
|
||||
buckets[date] = [];
|
||||
}
|
||||
buckets[date].push(image);
|
||||
}
|
||||
|
||||
buckets[date].push(image);
|
||||
}
|
||||
return Object.entries(buckets)
|
||||
.map(([date, images]) => ({ date: new Date(date), images }))
|
||||
.sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||
},
|
||||
);
|
||||
|
||||
return Object.entries(buckets)
|
||||
.map(([date, images]) => ({ date: new Date(date), images }))
|
||||
.sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||
},
|
||||
);
|
||||
const processingImages = () => data()?.processingImages ?? [];
|
||||
|
||||
const processingImages = () => data()?.processingImages ?? [];
|
||||
|
||||
return (
|
||||
<SearchImageContext.Provider
|
||||
value={{
|
||||
imagesByDate: sortedImages,
|
||||
lists: () => data()?.lists ?? [],
|
||||
userImages: () => data()?.userImages ?? [],
|
||||
processingImages,
|
||||
onRefetchImages: refetch,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</SearchImageContext.Provider>
|
||||
);
|
||||
return (
|
||||
<SearchImageContext.Provider
|
||||
value={{
|
||||
imagesByDate: sortedImages,
|
||||
lists: () => data()?.lists ?? [],
|
||||
userImages: () => data()?.userImages ?? [],
|
||||
processingImages,
|
||||
onRefetchImages: refetch,
|
||||
onDeleteImage: (imageID: string) => {
|
||||
deleteImage(imageID).then(refetch);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</SearchImageContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSearchImageContext = () => {
|
||||
const context = useContext(SearchImageContext);
|
||||
if (context == null) {
|
||||
throw new Error(
|
||||
"Unreachable: We should always have a mounted context and no undefined values",
|
||||
);
|
||||
}
|
||||
const context = useContext(SearchImageContext);
|
||||
if (context == null) {
|
||||
throw new Error(
|
||||
"Unreachable: We should always have a mounted context and no undefined values",
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
return context;
|
||||
};
|
||||
|
||||
@ -3,62 +3,63 @@ import { Component, For } from "solid-js";
|
||||
import { createVirtualizer } from "@tanstack/solid-virtual";
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { chunkRows } from "./chunk";
|
||||
import { deleteImage } from "@network/index";
|
||||
|
||||
type ImageOrDate =
|
||||
| { type: "image"; ID: string[] }
|
||||
| { type: "date"; date: Date };
|
||||
| { type: "image"; ID: string[] }
|
||||
| { type: "date"; date: Date };
|
||||
|
||||
export const AllImages: Component = () => {
|
||||
let scrollRef: HTMLDivElement | undefined;
|
||||
let scrollRef: HTMLDivElement | undefined;
|
||||
|
||||
const { imagesByDate } = useSearchImageContext();
|
||||
const { imagesByDate, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const items = () => {
|
||||
const items: Array<ImageOrDate> = [];
|
||||
const items = () => {
|
||||
const items: Array<ImageOrDate> = [];
|
||||
|
||||
for (const { date, images } of imagesByDate()) {
|
||||
items.push({ type: "date", date });
|
||||
const chunkedRows = chunkRows(3, images);
|
||||
for (const chunk of chunkedRows) {
|
||||
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
|
||||
}
|
||||
}
|
||||
for (const { date, images } of imagesByDate()) {
|
||||
items.push({ type: "date", date });
|
||||
const chunkedRows = chunkRows(3, images);
|
||||
for (const chunk of chunkedRows) {
|
||||
items.push({ type: "image", ID: chunk.map((c) => c.ImageID) });
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
return items;
|
||||
};
|
||||
|
||||
const rowVirtualizer = createVirtualizer({
|
||||
count: items().length,
|
||||
estimateSize: () => 400,
|
||||
getScrollElement: () => scrollRef!,
|
||||
overscan: 3,
|
||||
});
|
||||
const rowVirtualizer = createVirtualizer({
|
||||
count: items().length,
|
||||
estimateSize: () => 400,
|
||||
getScrollElement: () => scrollRef!,
|
||||
overscan: 3,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
|
||||
>
|
||||
<For each={rowVirtualizer.getVirtualItems()}>
|
||||
{(i) => {
|
||||
const item = items()[i.index];
|
||||
if (item.type === "image") {
|
||||
return (
|
||||
<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<h3 class="col-span-3 font-bold text-2xl">
|
||||
{item.date.toDateString()}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
class="flex flex-col gap-4 h-[calc(100% - 12px)] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class={`h-[${rowVirtualizer.getTotalSize()}px] grid grid-cols-3 gap-4 rounded-xl border border-neutral-200 bg-white p-4`}
|
||||
>
|
||||
<For each={rowVirtualizer.getVirtualItems()}>
|
||||
{(i) => {
|
||||
const item = items()[i.index];
|
||||
if (item.type === "image") {
|
||||
return (
|
||||
<For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<h3 class="col-span-3 font-bold text-2xl">
|
||||
{item.date.toDateString()}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
import { Component, For } from "solid-js";
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { deleteImage } from "@network/index";
|
||||
|
||||
const NUMBER_OF_MAX_RECENT_IMAGES = 10;
|
||||
|
||||
export const Recent: Component = () => {
|
||||
const { userImages } = useSearchImageContext();
|
||||
const { userImages, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const latestImages = () =>
|
||||
userImages()
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
|
||||
)
|
||||
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
|
||||
const latestImages = () =>
|
||||
userImages()
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
|
||||
)
|
||||
.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
|
||||
|
||||
return (
|
||||
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
|
||||
<h2 class="text-xl font-bold">Recent Screenshots</h2>
|
||||
<div class="grid grid-cols-3 gap-4 place-items-center">
|
||||
<For each={latestImages()}>
|
||||
{(image) => <ImageComponent ID={image.ImageID} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
|
||||
<h2 class="text-xl font-bold">Recent Screenshots</h2>
|
||||
<div class="grid grid-cols-3 gap-4 place-items-center">
|
||||
<For each={latestImages()}>
|
||||
{(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,35 +4,36 @@ import { useParams } from "@solidjs/router";
|
||||
import { For, type Component } from "solid-js";
|
||||
import SolidjsMarkdown from "solidjs-markdown";
|
||||
import { ListCard } from "@components/list-card";
|
||||
import { deleteImage } from "@network/index";
|
||||
|
||||
export const ImagePage: Component = () => {
|
||||
const { imageId } = useParams<{ imageId: string }>();
|
||||
const { imageId } = useParams<{ imageId: string }>();
|
||||
|
||||
const { userImages, lists } = useSearchImageContext();
|
||||
const { userImages, lists, onDeleteImage } = useSearchImageContext();
|
||||
|
||||
const image = () => userImages().find((i) => i.ImageID === imageId);
|
||||
const image = () => userImages().find((i) => i.ImageID === imageId);
|
||||
|
||||
return (
|
||||
<main class="flex flex-col items-center gap-4">
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<ImageComponentFullHeight ID={imageId} />
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<For each={image()?.Image.ImageLists}>
|
||||
{(imageList) => (
|
||||
<ListCard
|
||||
list={lists().find((l) => l.ID === imageList.ListID)!}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
return (
|
||||
<main class="flex flex-col items-center gap-4">
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<ImageComponentFullHeight ID={imageId} onDelete={onDeleteImage()} />
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<For each={image()?.Image.ImageLists}>
|
||||
{(imageList) => (
|
||||
<ListCard
|
||||
list={lists().find((l) => l.ID === imageList.ListID)!}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white rounded-xl p-4">
|
||||
<h2 class="font-bold text-2xl">Description</h2>
|
||||
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,47 +2,50 @@ import { Component, createSignal, For } from "solid-js";
|
||||
import { Search } from "@kobalte/core/search";
|
||||
import { IconSearch } from "@tabler/icons-solidjs";
|
||||
import { useSearch } from "./search";
|
||||
import { JustTheImageWhatAreTheseNames } from "@network/index";
|
||||
import { deleteImage, JustTheImageWhatAreTheseNames } from "@network/index";
|
||||
import { ImageComponent } from "@components/image";
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
|
||||
export const SearchPage: Component = () => {
|
||||
const fuse = useSearch();
|
||||
const fuse = useSearch();
|
||||
|
||||
const [searchItems, setSearchItems] =
|
||||
createSignal<JustTheImageWhatAreTheseNames>([]);
|
||||
const { onDeleteImage } = useSearchImageContext();
|
||||
|
||||
return (
|
||||
<Search
|
||||
options={searchItems()}
|
||||
onInputChange={(e) => {
|
||||
setSearchItems(
|
||||
fuse()
|
||||
.search(e)
|
||||
.map((i) => i.item),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Search.Label />
|
||||
<Search.Control class="flex">
|
||||
<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
|
||||
<Search.Icon>
|
||||
<IconSearch />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input
|
||||
class="w-full p-4 font-bold text-xl rounded-r-xl"
|
||||
placeholder="Woking Station..."
|
||||
/>
|
||||
</Search.Control>
|
||||
<Search.Portal>
|
||||
<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
|
||||
<Search.Arrow />
|
||||
<For each={searchItems()}>
|
||||
{(item) => <ImageComponent ID={item.ImageID} />}
|
||||
</For>
|
||||
<Search.NoResult>No result found</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
);
|
||||
const [searchItems, setSearchItems] =
|
||||
createSignal<JustTheImageWhatAreTheseNames>([]);
|
||||
|
||||
return (
|
||||
<Search
|
||||
options={searchItems()}
|
||||
onInputChange={(e) => {
|
||||
setSearchItems(
|
||||
fuse()
|
||||
.search(e)
|
||||
.map((i) => i.item),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Search.Label />
|
||||
<Search.Control class="flex">
|
||||
<Search.Indicator class="bg-neutral-200 p-4 rounded-l-xl">
|
||||
<Search.Icon>
|
||||
<IconSearch />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input
|
||||
class="w-full p-4 font-bold text-xl rounded-r-xl"
|
||||
placeholder="Woking Station..."
|
||||
/>
|
||||
</Search.Control>
|
||||
<Search.Portal>
|
||||
<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
|
||||
<Search.Arrow />
|
||||
<For each={searchItems()}>
|
||||
{(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
|
||||
</For>
|
||||
<Search.NoResult>No result found</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user