export function EdgeSearchResult()

in packages/graph-explorer/src/modules/SearchSidebar/EdgeSearchResult.tsx [24:71]
47 lines of code
1 McCabe index (conditional complexity)

export function EdgeSearchResult({ edge }: { edge: Edge }) {
  const [expanded, setExpanded] = useState(false);
  const displayEdge = useDisplayEdgeFromEdge(edge);
  const source = useDisplayVertexFromFragment(
    displayEdge.source.id,
    displayEdge.source.types
  );
  const target = useDisplayVertexFromFragment(
    displayEdge.target.id,
    displayEdge.target.types
  );

  return (
    <div
      className={cn(
        "bg-background-default group w-full overflow-hidden transition-all"
      )}
      data-expanded={expanded}
    >
      <div
        onClick={() => setExpanded(e => !e)}
        className="group-data-[expanded=true]:border-background-secondary group flex w-full flex-row items-center gap-2 p-3 text-left ring-0 hover:cursor-pointer"
      >
        <div>
          <ChevronRightIcon className="text-primary-dark/50 size-5 transition-transform duration-200 ease-in-out group-data-[expanded=true]:rotate-90" />
        </div>
        <EdgeRow
          edge={displayEdge}
          source={source}
          target={target}
          className="grow"
        />
        <AddOrRemoveButton edge={edge} />
      </div>
      <div className="border-background-secondary px-8 transition-all group-data-[expanded=false]:h-0 group-data-[expanded=true]:h-auto group-data-[expanded=true]:border-t">
        <ul>
          {displayEdge.attributes.map(attr => (
            <EntityAttribute
              key={attr.name}
              attribute={attr}
              className="border-b border-gray-200 px-3 py-2 last:border-0"
            />
          ))}
        </ul>
      </div>
    </div>
  );
}