@marimo-team/frontend 0.14.18-dev5 → 0.14.18-dev50

package/src/components/audio/audio-recorder.tsx

@@ -0,0 +1,63 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { CircleIcon, SquareIcon } from "lucide-react";
+import React from "react";
+import type { RecordingStatus } from "@/hooks/useAudioRecorder";
+import { cn } from "@/utils/cn";
+import { Button } from "../ui/button";
+
+interface AudioRecorderProps {
+  onStart: () => void;
+  onStop: () => void;
+  onPause: () => void;
+  status: RecordingStatus;
+  time?: string;
+}
+
+export const AudioRecorder: React.FC<AudioRecorderProps> = ({
+  onStart,
+  onStop,
+  onPause,
+  status,
+  time,
+}) => {
+  return (
+    <div className="flex items-center gap-3">
+      {status === "stopped" && (
+        <Button
+          data-testid="audio-recorder-start"
+          variant="secondary"
+          onClick={onStart}
+          className="w-[50px]"
+        >
+          <CircleIcon
+            className={cn("w-6 h-6 border border-input rounded-full")}
+            strokeWidth={1.5}
+            fill="var(--red-9)"
+          />
+        </Button>
+      )}
+      {status === "recording" && (
+        <Button
+          data-testid="audio-recorder-pause"
+          variant="secondary"
+          onClick={onStop}
+          className="w-[50px]"
+        >
+          <SquareIcon
+            className="w-5 h-5 rounded-sm"
+            fill="var(--red-9)"
+            strokeWidth={1.5}
+          />
+          <CircleIcon
+            className={cn("w-6 h-6 absolute opacity-20 animate-ping")}
+            fill="var(--red-9)"
+            style={{ animationDuration: "1.5s" }}
+            strokeWidth={0}
+          />
+        </Button>
+      )}
+      {time && <span className="text-sm font-bold">{time}s</span>}
+    </div>
+  );
+};

package/src/components/buttons/clear-button.tsx

@@ -0,0 +1,23 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { cn } from "@/utils/cn";
+
+interface ClearButtonProps {
+  className?: string;
+  dataTestId?: string;
+  onClick: () => void;
+}
+
+export const ClearButton: React.FC<ClearButtonProps> = (props) => (
+  <button
+    type="button"
+    data-testid={props.dataTestId}
+    className={cn(
+      "text-xs font-semibold text-accent-foreground",
+      props.className,
+    )}
+    onClick={props.onClick}
+  >
+    Clear
+  </button>
+);

package/src/components/buttons/undo-button.tsx

@@ -0,0 +1,35 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { useEventListener } from "@/hooks/useEventListener";
+import { MinimalHotkeys } from "../shortcuts/renderShortcut";
+import { Button, type ButtonProps } from "../ui/button";
+
+/* Copyright 2024 Marimo. All rights reserved. */
+interface UndoButtonProps extends Omit<ButtonProps, "onClick"> {
+  onClick?: (event: Pick<Event, "preventDefault" | "stopPropagation">) => void;
+}
+
+export const UndoButton = (props: UndoButtonProps) => {
+  // Add ctrl-z or meta-z event listener
+  useEventListener(
+    window,
+    "keydown",
+    (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "z") {
+        event.preventDefault();
+        event.stopPropagation();
+        props.onClick?.(event);
+      }
+    },
+    {
+      capture: true,
+    },
+  );
+
+  const children = props.children ?? "Undo";
+
+  return (
+    <Button data-testid="undo-button" size="sm" variant="outline" {...props}>
+      {children} <MinimalHotkeys className="ml-2" shortcut="cmd-z" />
+    </Button>
+  );
+};