signoz/frontend/src/modules/Traces/SelectedSpanDetails.tsx

import React from "react";
import { Card, Tabs } from "antd";
const { TabPane } = Tabs;

interface spanTagItem {
	key: string;
	type: string;
	value: string;
}

interface SelectedSpanDetailsProps {
	clickedSpanTags: spanTagItem[];
}

const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
	const callback = (key: any) => {};

	return (
		<Card style={{ height: 320 }}>
			<Tabs defaultActiveKey="1" onChange={callback}>
				<TabPane tab="Tags" key="1">
					<strong> Details for selected Span </strong>
					{props.clickedSpanTags.map((tags, index) => (
						<li
							key={index}
							style={{ color: "grey", fontSize: "13px", listStyle: "none" }}
						>
							<span className="mr-1">{tags.key}</span>:
							<span className="ml-1">
								{tags.key === "error" ? "true" : tags.value}
							</span>
						</li>
					))}{" "}
				</TabPane>
				<TabPane tab="Errors" key="2">
					{props.clickedSpanTags
						.filter((tags) => tags.key === "error")
						.map((error) => (
							<div className="ml-5">
								<p style={{ color: "grey", fontSize: "10px" }}>
									<span className="mr-1">{error.key}</span>:
									<span className="ml-1">true</span>
								</p>
							</div>
						))}
				</TabPane>
			</Tabs>
		</Card>
	);
};

export default SelectedSpanDetails;