({
node,
isHighlighted,
onClick,
isLast,
}: {
node: ColumnViewNode;
isHighlighted: boolean;
onClick?: (id: string) => void;
isLast: boolean;
})
| 175 | } |
| 176 | |
| 177 | function PathBarElement({ |
| 178 | node, |
| 179 | isHighlighted, |
| 180 | onClick, |
| 181 | isLast, |
| 182 | }: { |
| 183 | node: ColumnViewNode; |
| 184 | isHighlighted: boolean; |
| 185 | onClick?: (id: string) => void; |
| 186 | isLast: boolean; |
| 187 | }) { |
| 188 | return ( |
| 189 | <div |
| 190 | className="flex items-center min-w-0" |
| 191 | style={{ |
| 192 | flexShrink: 1, |
| 193 | }} |
| 194 | > |
| 195 | <div |
| 196 | className={`flex items-center hover:cursor-pointer min-w-0 transition ${isHighlighted |
| 197 | ? "text-slate-700 bg-slate-300 px-2 py-[3px] rounded-sm dark:text-white dark:bg-slate-700" |
| 198 | : "hover:bg-slate-300 px-2 py-[3px] rounded-sm transition dark:hover:bg-white dark:hover:bg-opacity-[5%]" |
| 199 | }`} |
| 200 | style={{ |
| 201 | flexShrink: 1, |
| 202 | }} |
| 203 | onClick={() => onClick && onClick(node.id)} |
| 204 | > |
| 205 | <div className="w-4 flex-shrink-[0.5] flex-grow-0 flex-col justify-items-center whitespace-nowrap overflow-x-hidden transition dark:text-slate-400"> |
| 206 | {node.icon && <node.icon className="h-3 w-3" />} |
| 207 | </div> |
| 208 | <Body className="flex-shrink flex-grow-0 whitespace-nowrap overflow-x-hidden text-ellipsis transition dark:text-slate-400"> |
| 209 | {node.title} |
| 210 | </Body> |
| 211 | </div> |
| 212 | |
| 213 | {isLast ? ( |
| 214 | <></> |
| 215 | ) : ( |
| 216 | <ChevronRightIcon className="flex-grow-0 flex-shrink-[0.5] w-4 h-4 text-slate-400 whitespace-nowrap overflow-x-hidden" /> |
| 217 | )} |
| 218 | </div> |
| 219 | ); |
| 220 | } |
| 221 | |
| 222 | const PathBarItem = memo(PathBarElement); |
nothing calls this directly
no outgoing calls
no test coverage detected