191 lines
8.8 KiB
TypeScript
191 lines
8.8 KiB
TypeScript
import { Component, createSignal } from "solid-js";
|
||
import { base } from "../../network";
|
||
import { A } from "@solidjs/router";
|
||
import { Dialog } from "@kobalte/core";
|
||
|
||
type ImageComponentProps = {
|
||
ID: string;
|
||
onDelete: (id: string) => void;
|
||
onRefresh: (id: string) => void;
|
||
};
|
||
|
||
export const ImageComponent: Component<ImageComponentProps> = (props) => {
|
||
const [isOpen, setIsOpen] = createSignal(false);
|
||
const [isRefreshOpen, setIsRefreshOpen] = 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>
|
||
<button
|
||
aria-label="Refresh image"
|
||
class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
|
||
onClick={() => setIsRefreshOpen(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>
|
||
|
||
<Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
|
||
<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 Refresh
|
||
</Dialog.Title>
|
||
<Dialog.Description class="mb-4">
|
||
Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
|
||
onClick={() => {
|
||
props.onRefresh?.(props.ID);
|
||
setIsRefreshOpen(false);
|
||
}}
|
||
>
|
||
Confirm
|
||
</button>
|
||
</div>
|
||
</Dialog.Content>
|
||
</Dialog.Portal>
|
||
</Dialog.Root>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export const ImageComponentFullHeight: Component<ImageComponentProps> = (
|
||
props,
|
||
) => {
|
||
const [isOpen, setIsOpen] = createSignal(false);
|
||
const [isRefreshOpen, setIsRefreshOpen] = 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>
|
||
<button
|
||
aria-label="Refresh image"
|
||
class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
|
||
onClick={() => setIsRefreshOpen(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>
|
||
|
||
<Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
|
||
<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 Refresh
|
||
</Dialog.Title>
|
||
<Dialog.Description class="mb-4">
|
||
Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
|
||
onClick={() => {
|
||
props.onRefresh?.(props.ID);
|
||
setIsRefreshOpen(false);
|
||
}}
|
||
>
|
||
Confirm
|
||
</button>
|
||
</div>
|
||
</Dialog.Content>
|
||
</Dialog.Portal>
|
||
</Dialog.Root>
|
||
</>
|
||
);
|
||
};
|