825d46c934
* refactor: move to tanstack start * refactor: auth flow & volumes * refactor: repo & snapshot details * refactor: backups, create repo, volumes * refactor: create volume & restore snapshot * refactor: notifications * refactor: settings * refactor: breadcrumbs * fix: ts issues * refactor: prod deployment * fix: import css production * refactor: nitro build * refactor: winston -> consola * fix: memory leak is sse events cleanup * fix: cli usage * chore: remove rr routes file * refactor: pr feedbacks * refactor: patch api client to have a global client per call * refactor: pr feedbacks * fix(dockerfile): add explicit port * fix(e2e): healthcheck under /api
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { ClientOnly } from "@tanstack/react-router";
|
|
import { GripVertical } from "lucide-react";
|
|
import type { PropsWithChildren } from "react";
|
|
|
|
interface SortableBackupCardProps {
|
|
isDragging?: boolean;
|
|
uniqueId: number;
|
|
}
|
|
|
|
export function SortableCard({ isDragging, uniqueId, children }: PropsWithChildren<SortableBackupCardProps>) {
|
|
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
|
|
id: uniqueId,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="relative group">
|
|
<ClientOnly>
|
|
<div
|
|
{...attributes}
|
|
{...listeners}
|
|
className="absolute left-1/2 -translate-x-1/2 top-1 z-10 cursor-grab active:cursor-grabbing opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-muted/50 bg-background/80 backdrop-blur-sm"
|
|
>
|
|
<GripVertical className="h-4 w-4 text-muted-foreground rotate-90" />
|
|
</div>
|
|
</ClientOnly>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|