工嶺祭2023HP制作の裏側

export function EventQuery({
  filter,
  onChangeFilter,
}: EventQueryProps): ReactNode {
  const selectedLebel = filterList.find((item) => item.value === filter)?.label;

  return (
    <form className={styles.query}>
      <div className={styles.listbox}>
        <Listbox value={filter} onChange={onChangeFilter}>
          <Listbox.Button className={styles.button}>
            {({ open }) => (
              <>
                {selectedLebel}
                <LiaAngleDownSolid
                  className={clsx(
                    styles.buttonIcon,
                    open && styles.buttonIconOpen,
                  )}
                />
              </>
            )}
          </Listbox.Button>
          <Transition
            as={Fragment}
            leave={styles.optionsLeave}
            leaveFrom={styles.optionsLeaveFrom}
            leaveTo={styles.optionsLeaveTo}
          >
            <Listbox.Options className={styles.options}>
              {filterList.map((item) => (
                <Listbox.Option
                  key={item.value}
                  value={item.value}
                  className={({ active, selected }) =>
                    clsx(
                      styles.option,
                      active && styles.optionActive,
                      selected && styles.optionSelected,
                    )
                  }
                >
                  {item.label}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </Listbox>
      </div>
    </form>
  );
}

import { createVar, style } from "@vanilla-extract/css";

export const timetableDuration = createVar();

// タイムテーブル全体
export const timetable = style({
  display: "grid",
  gridTemplateColumns:
    "[time-start] auto [time-end program-start] 1fr [program-end]",
  gridTemplateRows: `auto repeat(calc(${timetableDuration} / 5), 1fr)`,
  lineHeight: 1,
  maxWidth: "600px",
  marginInline: "auto",
});

export const timeStart = createVar();
export const timeEnd = createVar();

// 時間ごとの横線
export const timeBorder = style({
  gridColumn: "time-end / -1",
  gridRow: `calc(${timeStart} + 1) / span 1`,
  borderTop: `1px dotted ${vars.color.border}`,
  zIndex: -1,
});

// スケジュール
export const program = style({
  gridColumn: "program-start / program-end",
  gridRow: `calc(${timeStart} + 1) / calc(${timeEnd} + 1)`,
  margin: "0.25rem",
  padding: "0.25rem",
  color: vars.color.textAccent,
  borderRadius: "0.25rem",
});

import dynamic from "next/dynamic";

const Map = dynamic(() => import("./_components/Map"), { ssr: false });

export default function Page() {
  return (
    <main>
      {/* ... */}
      <Map />
    </main>
  )
}

const festivalStart = Temporal.ZonedDateTime.from(
  "2023-10-21T09:30:00+09:00[Asia/Tokyo]",
);
const festivalEnd = Temporal.ZonedDateTime.from(
  "2023-10-22T15:30:00+09:00[Asia/Tokyo]",
);
type FestivalState = "before" | "during" | "after";

export function CountdownTimer(): ReactNode {
  const [diff, setDiff] = useState(Temporal.Duration.from({ seconds: 0 }));
  const [festivalState, setFestivalState] = useState<FestivalState>("before");

  useEffect(() => {
    const update = () => {
      const now = Temporal.Now.zonedDateTimeISO("Asia/Tokyo");

      // 工嶺祭前
      if (Temporal.ZonedDateTime.compare(now, festivalStart) < 0) {
        setDiff(
          now.until(festivalStart, {
            largestUnit: "day", // 最大単位を日に設定
            smallestUnit: "second", // 最小単位を秒に設定
          }),
        );
        setFestivalState("before");
        return;
      }
      // 工嶺祭中
      if (Temporal.ZonedDateTime.compare(now, festivalEnd) < 0) {
        setDiff(
          now.until(festivalEnd, {
            largestUnit: "day",
            smallestUnit: "second",
          }),
        );
        setFestivalState("during");
        return;
      }

      // 工嶺祭後
      setDiff(Temporal.Duration.from({ seconds: 0 }));
      setFestivalState("after");
    };

    update();

    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, [setDiff]);

  // ...
}

return (
  <video
    muted
    playsInline
    loop
    controls
    ref={videoRef}
    className={styles.video}
  >
    <source src="/assets/cm.webm" type="video/webm" />
    <source src="/assets/cm.mp4" type="video/mp4" />
  </video>
);

import localFont from "next/font/local";

const font = localFont({
  src: "../assets/SourceHanSansJP-VF.otf.woff2",
  fallback: ["sans-serif"],
});

"use client";

import type { ReactNode } from "react";
import { useEffect, useLayoutEffect } from "react";

// このコンポーネントがレンダリングされると自動的にリセット処理が走る
// リセット処理が走ってもエラーが発生している場合は、エラー画面が表示される
let wasReset = false;

type GlobalErrorProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function GlobalError({ reset }: GlobalErrorProps): ReactNode {
  useLayoutEffect(() => {
    if (wasReset) return;
    wasReset = true;

    /* †死者蘇生† */
    reset();
  }, [reset]);

  useEffect(() => {
    const id = setTimeout(() => {
      window.location.reload();
    }, 60 * 1000);

    return () => {
      clearTimeout(id);
    };
  }, []);

  const handleReload = () => {
    window.location.reload();
  };

  return (
    <html lang="ja">
      <body
        style={{
          width: "100%",
          height: "100dvh",
          display: "grid",
          placeItems: "center",
          padding: "1rem",
        }}
      >
        <main
          style={{
            maxWidth: "80ch",
            display: "grid",
            placeItems: "center",
            gap: "1rem",
          }}
        >
          <p>
            エラーが発生したようです。
            再読み込みを行っても直らない場合は担当者に連絡してください。
          </p>
          <button
            onClick={handleReload}
            style={{
              padding: "0.5rem 1rem",
              border: "1px solid #ccc",
              borderRadius: "5px",
              cursor: "pointer",
            }}
          >
            再読み込み
          </button>
        </main>
      </body>
    </html>
  );
}

import base from "@shun-shobon/eslint-config-base/flat";
import next from "@shun-shobon/eslint-config-next/flat";
import react from "@shun-shobon/eslint-config-react/flat";

export default [
  ...base,
  ...react,
  ...next,
  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.json",
      },
    },
  },
  {
    ignores: [".next/", "storybook-static/", "out/"],
  },
];