first commit

ui/app/workspace/logs/views/logEntryDetailsView.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+	className?: string;
+	containerClassName?: string;
+	isBeta?: boolean;
+	valueClassName?: string;
+	label: string;
+	value: React.ReactNode | null;
+	hideExpandable?: boolean;
+	orientation?: "horizontal" | "vertical";
+	align?: "left" | "right";
+}
+
+export default function LogEntryDetailsView(props: Props) {
+	if (props.value === null) {
+		return null;
+	}
+	const orientation = props.orientation || "vertical";
+	return (
+		<div
+			className={cn("items-top flex flex-col gap-2", {
+				[`${props.className}`]: props.className !== undefined,
+				"items-start": props.align === "left" || props.align === undefined,
+				"items-end": props.align === "right",
+			})}
+		>
+			<div className={props.containerClassName}>
+				{props.label !== "" && (
+					<div className="text-muted-foreground flex shrink-0 flex-row items-center gap-2 pb-2 text-xs font-medium">
+						{props.label.toUpperCase().replace(/_/g, " ")}
+					</div>
+				)}
+				<div
+					className={cn("text-md flex text-xs font-medium overflow-ellipsis transition-transform delay-75", {
+						"w-full flex-col items-center gap-2": orientation === "horizontal",
+						"flex-row items-start gap-2": orientation === "vertical",
+						[`${props.valueClassName}`]: props.valueClassName !== undefined,
+						"text-end": props.align === "right",
+					})}
+				>
+					<div className="text-bifrost-gray-300 flex-1 text-sm break-all">
+						{typeof props.value === "boolean" ? String(props.value) : props.value}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}