EvanMarie

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

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 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

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

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 JsonError({ jsonError }: { jsonError: string | null }) {
  return (
    // Display JSON error message if present
    <HStack className="absolute z-10 px-[1vh] py-[0px] bottom-[1vh] left-[1vh] bg-col-pink bg-gradient-to-br from-fuchsia-380 via-fuchsia-360 to-fuchsia-380 w-fit max-w-80% items-center border-400-lg shadowNarrowTight">
      <Icon icon={MdErrorOutline} iconClassName="text-col-900 text-[2.3vh]" />
      <Text className="text-col-900 text-stroke-5-900 text-sm">
        {jsonError}
      </Text>
    </HStack>
  );

EvanMarie

interface TextAreaProps
  extends Omit<
    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
    "value" | "onChange"
  > {
  className?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  style?: React.CSSProperties;
  textAreaHeight?: string;

EvanMarie

const JSONExamples = [
  `{
  "posts": [
    {
      "id": 1,
      "title": "How to Learn JavaScript",
      "author": "Alice Johnson",
      "published": "2024-09-01",
      "tags": ["JavaScript", "Programming", "Web Development"],
      "content": "JavaScript is a versatile programming language used for web development..."

EvanMarie

type IconBarType = {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
};

const iconBar = [
  { icon: MdOutlinePark, label: "National Park" },
  { icon: MdOutlinePool, label: "Beautiful Pools" },
  { icon: MdOutlinePhotoCamera, label: "Amazing Views" },
  { icon: GiSydneyOperaHouse, label: "Top Cities" },