Split codebase (#455)

apps/yaak-client/components/core/EventViewerRow.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import { format } from "date-fns";
+import type { ReactNode } from "react";
+
+interface EventViewerRowProps {
+  isActive: boolean;
+  onClick: () => void;
+  icon: ReactNode;
+  content: ReactNode;
+  timestamp?: string;
+}
+
+export function EventViewerRow({
+  isActive,
+  onClick,
+  icon,
+  content,
+  timestamp,
+}: EventViewerRowProps) {
+  return (
+    <div className="px-1">
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames(
+          "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
+          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded",
+          isActive && "bg-surface-active !text-text",
+          "text-text-subtle hover:text",
+        )}
+      >
+        {icon}
+        <div className="w-full truncate">{content}</div>
+        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, "HH:mm:ss.SSS")}</div>}
+      </button>
+    </div>
+  );
+}