bb-plane-fork/packages/ui/src/drop-indicator.tsx
rahulramesha 10ed12e589
[WEB-1005] chore: pragmatic drag n drop implementation for labels (#4223)
* pragmatic drag n drop implementation for labels

* minor code quality improvements
2024-04-17 18:20:02 +05:30

25 lines
700 B
TypeScript

import React from "react";
import { cn } from "../helpers";
type Props = {
isVisible: boolean;
classNames?: string;
};
export const DropIndicator = (props: Props) => {
const { isVisible, classNames = "" } = props;
return (
<div
className={cn(
`block relative h-[2px] w-full
before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded
after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded`,
{
"bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": isVisible,
},
classNames
)}
/>
);
};