HelpItem.astro

---
{/**
  * `Markdown`を回避する例として紹介されています．
  * コンポーネントをslotとして要求しなくなる場合は，`src/components/README.md`を編集して，
  * 別の例を紹介するようにしてください．
  * 
  * 利用例：src/components/README.mdを参照
  */}

import type { Lang, HelpItemType } from "@components/types";

interface Props {
  /**
   * 表示する言語
   */
  lang: Lang;
  /**
   * 表示形式
   * - oneline: 1行で表示
   * - details: 折りたたみで表示
   * - default: 通常の表示
   */
  type?: HelpItemType | undefined;
}

const { lang, type } = Astro.props;
const colon = { ja: "：", en: ": " }[lang];
const help = { ja: "ヘルプ", en: "Help" }[lang];
---

{/* check https://medium.com/@popoever/57f1aef6e437 for why prettier-ignore */}
{
  {
    oneline: () => (
      <>
        <!-- prettier-ignore -->
        <strong><slot name="problem" /></strong>{colon}<slot name="solution" />
      </>
    ),
    details: () => (
      <details>
        <summary>
          <!-- prettier-ignore -->
          {help}{colon}<slot name="problem" />
        </summary>
        <p>
          <slot name="solution" />
          <slot />
        </p>
      </details>
    ),
    default: () => (
      <>
        <strong><slot name="problem" /></strong>{colon}
        <p>
          <slot name="solution" />
          <slot />
        </p>
      </>
    ),
  }[type ?? "default"]()
}