EvanMarie

export function ValidatedJSONNumberedInput({
  initialValue,
  onChange,
}: {
  initialValue?: string;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
}) {
  // State to track textarea content and JSON validation errors
  const [value, setValue] = useState(initialValue);
  const [jsonError, setJsonError] = useState<string | null>(null);

EvanMarie

export function RenderJSONExample({
  JSONString,
  scrollRef,
}: {
  JSONString: string;
  scrollRef: React.RefObject<HTMLDivElement>;
}) {
  try {
    // Parse the input JSON string
    const shape = JSON.parse(JSONString);

EvanMarie

export function EditableJSONInput({
  JSONString,
  scrollRef,
  onChange,
}: {
  JSONString: string;
  scrollRef: React.RefObject<HTMLDivElement>;
  onChange: (updatedJSON: any) => void;
}) {
  const [jsonState, setJsonState] = useState(() => JSON.parse(JSONString));

EvanMarie

export default function DemoJsonInput() {
  const [isEditJSON, setIsEditJSON] = useState(false);
  const [isEditInput, setIsEditInput] = useState(false);
  const JSONTypes = ["posts", "users", "products", "locations"];
  const [selectedJSON, setSelectedJSON] = useState<
    "posts" | "users" | "products" | "locations"
  >("posts");

  // State to store the current selected JSON and modified data
  const [savedJSON, setSavedJSON] = useState({

EvanMarie

import { useRef, useState } from "react";
import { motion } from "framer-motion";
import FlexFull from "~/components/buildingBlocks/flexFull";
import Text from "~/components/buildingBlocks/text";
import VStackFull from "~/components/buildingBlocks/vStackFull";
import { useAudioPlayer } from "~/hooks/useAudioPlayer";
import HStack from "~/components/buildingBlocks/hStack";
import Icon from "~/components/buildingBlocks/icon";
import { FaPlay, FaStop } from "react-icons/fa";
import Tooltip from "~/components/buildingBlocks/tooltip";

EvanMarie

export function AboutAnomalocaris() {
  return (
    <SlideContainer
      darkMode={false}
      title="About Anomalocaris"
      transition="fadeSlideInBottom"
      audioName="about-anomalocaris"
      infoPanelContent={anomalocarisNarratives.aboutAnomalocaris}
    >
      <PresentationImage