@rockshin/react-image-annotation
Version:
An image annotation tool for ai project that manual annotation for images, easy to use!
34 lines (33 loc) • 1.92 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react_icons_gr_de08f9e5__ from "react-icons/gr";
const TopPanel = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "flex h-10 z-[300] pointer-events-auto bg-[var(--color-low)] py-1 px-2 rounded-b-lg gap-2",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
className: "flex-none w-10 cursor-pointer px-2 hover:bg-[#00000010] rounded-lg",
onClick: props.onPrevious,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_icons_gr_de08f9e5__.GrFormPreviousLink, {
color: "#2E2E2E",
size: 24
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
className: "flex items-center justify-center text-sm font-medium text-[var(--color-text-1)]",
children: [
props.currentIndex,
" / ",
props.totalCount
]
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
className: "flex-none w-10 cursor-pointer px-2 hover:bg-[#00000010] rounded-lg",
onClick: props.onNext,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_icons_gr_de08f9e5__.GrFormNextLink, {
className: "",
size: 24,
color: "var(--color-text-1)"
})
})
]
});
export { TopPanel };