Next.jsとTailwind CSSを使ってお酒一覧表を作ってみた！

初めに

今流行りのNext.js(TypeScript)とTailwindを使って何か作りたいなと思ったので、居酒屋でよく目にするお酒の度数や材料、特徴を一覧で見ることができるWebサービスを作成してみました。

お酒一覧表

良ければ使ってみてください！ お酒一覧表

使用した技術

画面のUIはMaterial-TailwindのAccordionを使いました。
参考URL
サイトに載っているソースコードをコピペするだけでオシャレなデザインができるのでオススメです！

Accordion.tsx

<Card>
   <div className="flex flex-row justify-between mb-4">
      <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{props.type}</h5>
   </div>
      <Fragment>
        <div className="flex flex-col">
          {props.alcohol.map((item) => (
            <Accordion
              open={open === item.key}
              animate={customAnimation}
              key={item.key}
            >
              <AccordionHeader onClick={() => handleOpen(item.key)}>
                <p className="text-base">{item.name}</p>
              </AccordionHeader>
              <AccordionBody>
                <p className="text-sm font-semibold">アルコール度数：{item.degrees}</p>
                <p className="text-sm font-semibold">原材料：{item.detail}</p>
                <p className="my-3 text-sm">{item.coment}</p>
              </AccordionBody>
            </Accordion>
          ))}
        </div>
      </Fragment>
    </Card>

お酒の情報を記載したJsonファイルを用意し、index.tsxからpropsでAccordion.tsxに渡します。

その後、map関数を使って表示を行っています。

実際に使用しているJsonファイルです。

[
    {
        "name":"ジントニック",
        "degrees":"5~10%",
        "detail":"ジン,トニックウォーター,ライム",
        "coment":"私が最も好きなお酒、独特な苦味と甘味が特徴的で飲みやすいカクテル",
        "key":1
    },
    {
        "name":"ジンバック",
        "degrees":"14%",
        "detail":"ジン,ジンジャーエール,レモンジュース",
        "coment":"ジントニックに飽きた人にオススメです。",
        "key":2
    },
    {
        "name":"ギムレット",
        "degrees":"25%",
        "detail":"ジン,ライムジュース,シュガーシロップ",
        "coment":"イギリス海軍で軍医を務めたギムレット卿が、人を飲みすぎる将校たちの健康を案じて、作成したカクテル",
        "key":3
    },
    {
        "name":"マティーニ",
        "degrees":"35%",
        "detail":"ジン,ベルモット,オリーブ,レモン",
        "coment":"カクテルの王様と呼ばれている「マティーニ」、爽快感のあるキリッとした味わいが特徴的。映画「7度目の浮気」でマリリン・モンローが、「007」ではジェームズ・ボンドが好んだカクテル.",
        "key":4
    } 
]

最後に

HostingはFirebaseを用いて行っています。
次回Next.jsをFirebase Hostingで公開する方法について投稿したいと思います。

今後もアップデートを行い、今後は銘柄も網羅したサービスにしていきます。
(広告やアフェリエイトリンクも記載しますが、ご了承ください)

お酒一覧表