Fullscreenable chart with minimap

main.tsx

import { h, render } from "preact";
import { useState } from "preact/hooks";
import "./index.css";

interface FullscreenProps {
  children: any | any[];
}
// The fullscreen component switches between relative to parent and fixed to page with full width/height (inset-0)
// A button "toggle" is fixed in the top left position
const Fullscreen = ({ children }: FullscreenProps) => {
  const [fullscreen, setFullscreen] = useState(false);
  return (
    <div class={fullscreen ? "fixed inset-0" : "relative"}>
      {children}
      {/* Button */}
      <span
        class="absolute top-0 left-0 p-2 cursor-pointer text-blue-400"
        onClick={() => setFullscreen(!fullscreen)}
      >
        Toggle
      </span>
    </div>
  );
};

// The chart contains two elements: blue and green
// When clicked the green component will minimize to the bottom right and the blue compoenent becomes visible
const Chart = () => {
  const [focus, setFocus] = useState(false);
  return (
    <div
      class="relative w-full h-full min-h-[360px] bg-red-100 cursor-pointer"
      onClick={() => setFocus(!focus)}
    >
      <div class="absolute inset-0 bg-blue-100"></div>
      <div
        class={`absolute bg-green-100 ${
          focus ? "w-[25%] aspect-square right-0 bottom-0" : "inset-0"
        }`}
      ></div>
    </div>
  );
};

const App = () => {
  return (
    <div class="w-[1024px] mx-auto mt-6">
      <Fullscreen>
        <Chart />
      </Fullscreen>
    </div>
  );
};

render(<App />, document.getElementById("app") as HTMLElement);