@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
61 lines (60 loc) • 2.99 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { ArrowTopRightOnSquareIcon, Bars2Icon, XMarkIcon } from "@heroicons/react/24/outline";
import external_clsx_default from "clsx";
import Link_mjs_default from "../common/Link.mjs";
const DndItem = ({ label, deletable, sortable, onRemoveClick, href, value })=>{
const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef } = useSortable({
id: value
});
const style = {
transform: CSS.Transform.toString(transform),
transition
};
return /*#__PURE__*/ jsxs("li", {
className: external_clsx_default("ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong bg-nextadmin-background-default dark:bg-dark-nextadmin-background-subtle relative flex w-full cursor-default justify-between gap-2 rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1", !deletable && "cursor-not-allowed opacity-50", "touch-none"),
ref: setNodeRef,
style: style,
...attributes,
"aria-describedby": "sortable-list",
children: [
/*#__PURE__*/ jsxs("div", {
className: "flex flex-1 items-center gap-2",
children: [
sortable && /*#__PURE__*/ jsx("div", {
ref: setActivatorNodeRef,
className: external_clsx_default({
"cursor-grab active:cursor-grabbing": sortable
}),
...listeners,
children: /*#__PURE__*/ jsx(Bars2Icon, {
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-4 w-4"
})
}),
label
]
}),
(href || deletable) && /*#__PURE__*/ jsxs("div", {
className: "flex items-center space-x-3",
children: [
!!href && /*#__PURE__*/ jsx(Link_mjs_default, {
href: href,
className: "flex items-center",
children: /*#__PURE__*/ jsx(ArrowTopRightOnSquareIcon, {
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-5 w-5 cursor-pointer"
})
}),
deletable && /*#__PURE__*/ jsx("div", {
onClick: ()=>onRemoveClick(),
children: /*#__PURE__*/ jsx(XMarkIcon, {
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-5 w-5 cursor-pointer"
})
})
]
})
]
});
};
const inputs_DndItem = DndItem;
export { inputs_DndItem as default };