JeremyBernier/gist:6fb95d7c3496f6383decac1669ff0df5

## gistfile1.txt
import { useState } from "react";
import type { NextPage } from "next";
import Head from "next/head";

const CloseIcon = () => (
  <svg
    aria-hidden="true"
    className="w-5 h-5"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
      clipRule="evenodd"
    ></path>
  </svg>
);

const Modal = ({
  title = "Modal Title",
  children,
  onClose,
  closeOnOutsideClick,
}) => (
  <div
    className="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
    onClick={closeOnOutsideClick ? onClose : null}
  >
    <div
      className="relative p-4 w-full max-w-xl h-full md:h-auto"
      onClick={(event) => event.stopPropagation()}
    >
      <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <div className="flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600">
          <h3 className="text-xl font-medium text-gray-900 dark:text-white">
            {title}
          </h3>
          <button
            type="button"
            className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
            data-modal-toggle="small-modal"
            onClick={onClose}
          >
            <CloseIcon />
            <span className="sr-only">Close modal</span>
          </button>
        </div>
        <div className="p-6 space-y-6">{children}</div>
        <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
          <button
            data-modal-toggle="small-modal"
            type="button"
            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          >
            I accept
          </button>
          <button
            data-modal-toggle="small-modal"
            type="button"
            className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
          >
            Decline
          </button>
        </div>
      </div>
    </div>
  </div>
);

const RandomPage: NextPage = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <Head>
        <title>Work Cafes</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-4xl mx-auto">
        {/* <div className="bg-gray-500 w-full h-64"></div> */}
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={() => setShowModal(!showModal)}
        >
          Toggle Modal
        </button>
        {showModal && (
          <Modal onClose={() => setShowModal(false)} closeOnOutsideClick>
            <p>Modal content goes here</p>
            <p>Great stuff</p>
          </Modal>
        )}
      </main>
    </div>
  );
};

export default RandomPage;
	import { useState } from "react";
	import type { NextPage } from "next";
	import Head from "next/head";

	const CloseIcon = () => (
	<svg
	aria-hidden="true"
	className="w-5 h-5"
	fill="currentColor"
	viewBox="0 0 20 20"
	xmlns="http://www.w3.org/2000/svg"
	>
	<path
	fillRule="evenodd"
	d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
	clipRule="evenodd"
	></path>
	</svg>
	);

	const Modal = ({
	title = "Modal Title",
	children,
	onClose,
	closeOnOutsideClick,
	}) => (
	<div
	className="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
	onClick={closeOnOutsideClick ? onClose : null}
	>
	<div
	className="relative p-4 w-full max-w-xl h-full md:h-auto"
	onClick={(event) => event.stopPropagation()}
	>
	<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
	<div className="flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600">
	<h3 className="text-xl font-medium text-gray-900 dark:text-white">
	{title}
	</h3>
	<button
	type="button"
	className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
	data-modal-toggle="small-modal"
	onClick={onClose}
	>
	<CloseIcon />
	<span className="sr-only">Close modal</span>
	</button>
	</div>
	<div className="p-6 space-y-6">{children}</div>
	<div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
	<button
	data-modal-toggle="small-modal"
	type="button"
	className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
	>
	I accept
	</button>
	<button
	data-modal-toggle="small-modal"
	type="button"
	className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
	>
	Decline
	</button>
	</div>
	</div>
	</div>
	</div>
	);

	const RandomPage: NextPage = () => {
	const [showModal, setShowModal] = useState(false);

	return (
	<div>
	<Head>
	<title>Work Cafes</title>
	<meta name="description" content="Generated by create next app" />
	<link rel="icon" href="/favicon.ico" />
	</Head>

	<main className="max-w-4xl mx-auto">
	{/* <div className="bg-gray-500 w-full h-64"></div> */}
	<button
	className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
	onClick={() => setShowModal(!showModal)}
	>
	Toggle Modal
	</button>
	{showModal && (
	<Modal onClose={() => setShowModal(false)} closeOnOutsideClick>
	<p>Modal content goes here</p>
	<p>Great stuff</p>
	</Modal>
	)}
	</main>
	</div>
	);
	};

	export default RandomPage;