Convex MCP server

import { useWindowSize } from "react-use";
import { useEffect, useState } from "react";
import FlourishTop from "./images/flourish-top.svg";
import FlourishBottom from "./images/flourish-bottom.svg";
import FlourishBottomRight from "./images/flourish-bottom-right.svg";
import FlourishRight from "./images/flourish-right.svg";
import FlourishLeft from "./images/flourish-left.svg";

export function Flourish() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  const { height } = useWindowSize();

  return mounted && height > 500 ? (
    <div className="hidden md:block dark:hidden">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 translate-y-[-20%]">
        <FlourishTop />
      </div>
      <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
        <FlourishBottom />
      </div>
      <div className="absolute right-0 bottom-[35%]">
        <FlourishRight />
      </div>
      <div className="absolute bottom-[20%] left-0 -translate-y-1/2">
        <FlourishLeft />
      </div>
      <div className="absolute right-[8%] bottom-0">
        <FlourishBottomRight />
      </div>
    </div>
  ) : null;
}