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

feat: adding button to delete image

Browse Source
This commit is contained in:
John Costa
2025-08-30 20:46:05 +01:00
parent 00359e2e8d
commit 5d1c758451
6 changed files with 301 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/components/image/index.tsx
View File

@@ -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>
</>
);
};