Warm start components

Author: matt-aitken

apps/webapp/app/components/WarmStarts.tsx

@@ -0,0 +1,59 @@
+import { WarmStartIcon } from "~/assets/icons/WarmStartIcon";
+import { InfoIconTooltip, SimpleTooltip } from "./primitives/Tooltip";
+import { cn } from "~/utils/cn";
+import { Paragraph } from "./primitives/Paragraph";
+
+export function WarmStartCombo({
+  isWarmStart,
+  showTooltip = false,
+  className,
+}: {
+  isWarmStart: boolean;
+  showTooltip?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex items-center gap-1 text-sm text-text-dimmed", className)}>
+      <WarmStartIcon isWarmStart={isWarmStart} className="size-5" />
+      <span>{isWarmStart ? "Warm Start" : "Cold Start"}</span>
+      {showTooltip && <InfoIconTooltip content={<WarmStartTooltipContent />} />}
+    </div>
+  );
+}
+
+export function WarmStartIconWithTooltip({
+  isWarmStart,
+  className,
+}: {
+  isWarmStart: boolean;
+  className?: string;
+}) {
+  return (
+    <SimpleTooltip
+      className="relative z-[9999]"
+      button={<WarmStartIcon isWarmStart={isWarmStart} className={className} />}
+      content={<WarmStartTooltipContent />}
+    />
+  );
+}
+
+function WarmStartTooltipContent() {
+  return (
+    <div className="flex max-w-xs flex-col gap-4 p-1">
+      <div>
+        <WarmStartCombo isWarmStart={false} className="mb-0.5 text-text-bright" />
+        <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+          A cold start happens when we need to boot up a new machine for your run to execute. This
+          takes longer than a warm start.
+        </Paragraph>
+      </div>
+      <div>
+        <WarmStartCombo isWarmStart={true} className="mb-0.5 text-text-bright" />
+        <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+          A warm start happens when we can reuse a machine from a run that recently finished. This
+          takes less time than a cold start.
+        </Paragraph>
+      </div>
+    </div>
+  );
+}