import { css } from "@/styled-system/css";
import Button from "./components/Button";

export function App() {
  return (
    <div
      className={css({
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        backgroundColor: "blue.100",
        rounded: "lg",
        p: 4,
      })}
    >
      <h3
        className={css({
          backgroundColor: "blue.800",
          color: "white",
        })}
      >
        TarteAuxMyrtilles
      </h3>
      <p
        className={css({
          color: "blue.800",
        })}
      >
        Hello World
      </p>
      <Button
        onClick={() => {console.log("Hello World")}}
      >Click me</Button>
    </div>
  );
}