Spaces:
Running
Running
File size: 1,510 Bytes
c9b2910 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible";
import { htmlTagToText } from "@/lib/html-tag-to-text";
import { Code, XCircle } from "lucide-react";
export const SelectedHtmlElement = ({
element,
onDelete,
}: {
element: HTMLElement | null;
onDelete?: () => void;
}) => {
if (!element) return null;
const tagName = element.tagName.toLowerCase();
return (
<Collapsible
className="border border-neutral-700 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out !cursor-pointer"
onClick={onDelete}
>
<CollapsibleTrigger className="flex items-center justify-start gap-2 cursor-pointer">
<div className="rounded-lg bg-neutral-700 size-6 flex items-center justify-center">
<Code className="text-neutral-300 size-3.5" />
</div>
<p className="text-sm font-semibold text-neutral-300">
{htmlTagToText(tagName)}
</p>
<XCircle className="text-neutral-300 size-4" />
</CollapsibleTrigger>
{/* <CollapsibleContent className="border-t border-neutral-700 pt-2 mt-2">
<div className="text-xs text-neutral-400">
<p>
<span className="font-semibold">ID:</span> {element.id || "No ID"}
</p>
<p>
<span className="font-semibold">Classes:</span>{" "}
{element.className || "No classes"}
</p>
</div>
</CollapsibleContent> */}
</Collapsible>
);
};
|