"use client";
import toast, { Toaster } from "react-hot-toast";
import { twMerge } from "tailwind-merge";

const Page: React.FC = () => {
  const buttonStyle = twMerge(
    "rounded-md  px-3 py-1 ",
    "font-bold text-white",
    "bg-indigo-500 hover:bg-indigo-700"
  );

  const successNotify = (msg: string) => toast.success(msg);
  const errorNotify = (msg: string) => toast.error(msg);

  return (
    <main>
      <div className="mb-2 text-2xl font-bold ">トースト通知</div>
      <div className="flex gap-x-3">
        <button
          className={buttonStyle}
          onClick={() => successNotify("成功スタイルのトースト通知")}
        >
          success
        </button>
        <button
          className={buttonStyle}
          onClick={() => errorNotify("エラースタイルのトースト通知")}
        >
          error
        </button>
      </div>

      <Toaster position="top-center" />
    </main>
  );
};

export default Page;

"use client";

import React, { ReactNode } from "react";
import ReactModal from "react-modal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/free-solid-svg-icons";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  children: ReactNode;
}

export const Modal: React.FC<Props> = (props) => {
  const { isOpen, onClose, children } = props;
  return (
    <ReactModal
      isOpen={isOpen}
      onRequestClose={onClose}
      contentLabel="Modal"
      closeTimeoutMS={300}
      ariaHideApp={false}
      className="relative z-50 h-screen w-screen bg-black/50"
      overlayClassName="fixed inset-0 bg-black_main flex items-center justify-center z-50"
    >
      <div className="flex size-full flex-col items-center justify-center">
        <div className="flex w-full justify-end md:w-[640px]">
          <button className="px-3 py-0.5  md:px-1" onClick={onClose}>
            <FontAwesomeIcon
              className="cursor-pointer text-2xl text-white hover:text-gray-300"
              icon={faXmark}
            />
          </button>
        </div>
        <div className="w-full bg-white p-3 md:w-[640px] md:rounded-md">
          {children}
        </div>
      </div>
    </ReactModal>
  );
};

"use client";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { Modal } from "./_components/Modal"; // コンポーネントのインポート

const Page: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <main>
      <div className="mb-2 text-2xl font-bold">モーダル</div>
      <div className="flex gap-x-3">
        <button
          className={twMerge(
            "rounded-md  px-3 py-1",
            "font-bold text-white",
            "bg-indigo-500 hover:bg-indigo-700"
          )}
          onClick={() => setIsModalOpen(true)}
        >
          モーダルウィンドウを開く
        </button>
      </div>

      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        {/* モーダル内に表示するコンテンツを <Modal>...</Modal> の子要素として与える */}
        <div>
          <div className="text-xl font-bold">徒然草</div>
          <div>
            <p>
              つれづれなるままに、日暮らし硯に向かひて、心にうつりゆくよしなしごとを、
              そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。
            </p>
          </div>
        </div>
      </Modal>
    </main>
  );
};

export default Page;

"use client";
import { useState } from "react";
import dayjs from "dayjs";
import { Switch } from "@/components/ui/switch";
import { Calendar } from "@/components/ui/calendar";

const Page: React.FC = () => {
  // スイッチ関連
  const [isDebugMode, setIsDebugMode] = useState(false);
  const handleIsDebugModeChange = (checked: boolean) => {
    if (checked) {
      console.log("Debug mode is enabled.");
    } else {
      console.log("Debug mode is disabled.");
    }
    setIsDebugMode(checked);
  };

  // カレンダ関連
  const dtFmt = "YYYY年MM月DD日が選択されました。";
  const [date, setDate] = useState<Date | undefined>();
  const [msg, setMsg] = useState<string>("日付を選択してください。");

  const handleDateChange = (date: Date | undefined) => {
    if (date === undefined) {
      setMsg("日付を選択してください。");
      return;
    }
    setMsg(dayjs(date).format(dtFmt));
    setDate(date);
  };

  return (
    <main>
      <div className="mb-4 text-2xl font-bold">shadcn/ui</div>

      <div className="flex flex-col gap-y-4">
        <div className="flex items-center gap-x-3">
          <Switch
            id="debug-mode"
            checked={isDebugMode}
            onCheckedChange={handleIsDebugModeChange}
          />
          <label htmlFor="debug-mode" className="cursor-pointer">
            デバッグモード
          </label>
        </div>

        <div className="">
          <Calendar
            mode="single"
            selected={date}
            onSelect={handleDateChange}
            className="inline-block rounded-md border"
          />
        </div>
        <div>{msg}</div>
      </div>
    </main>
  );
};

export default Page;

"use client";
import { Camera, ThumbsUp, Squirrel, Settings } from "lucide-react";

const Page: React.FC = () => {
  return (
    <main>
      <div className="mb-4 text-2xl font-bold">Lucide React Icon</div>

      <div className="flex gap-4">
        <div className="flex flex-col items-center">
          <div className="rounded-md border-2 p-2">
            <Camera className="size-24 text-red-500" />
          </div>
          <div>Camera</div>
        </div>
        <div className="flex flex-col items-center">
          <div className="rounded-md border-2 p-2">
            <ThumbsUp className="size-24 text-red-500" />
          </div>
          <div>ThumbsUp</div>
        </div>
        <div className="flex flex-col items-center">
          <div className="rounded-md border-2 p-2">
            <Squirrel className="size-24 text-red-500" />
          </div>
          <div>Squirrel</div>
        </div>
        <div className="flex flex-col items-center">
          <div className="rounded-md border-2 p-2">
            <Settings className="size-24 text-red-500" />
          </div>
          <div>Settings</div>
        </div>
      </div>
    </main>
  );
};

export default Page;