グループ一覧ページを作る

[chell-uoxou]

こんなん

Figma

https://www.figma.com/design/GxQoVRi8sZHkmyTJIm0M1N/design?node-id=1469-5722&t=bnOMINAW84djTrNI-11
ざっくり従ってもらって。好きなようにデザインしてもらえればいい。

どうする

• ログイン中のユーザーが参加しているグループを一覧し、検索し、脱退したりできる画面
  -/groupsでいけるようになる

ヒント

きっと使うもの:

• <SmallTitleWithIcon />: グループ設定系で使われてるタイトル
• 下記レイアウト

  <div className="p-6 flex flex-col gap-3">
    <div className="flex justify-between">
      タイトル
    </div>
    中身
  </div>

• flex-wrap: アイテム折り返し。 https://tailwindcss.com/docs/flex-wrap
• useCurrentAccount(): 現在ログイン中のユーザーのDB上のデータを取得。returnの中にgetGroupsByAccount()がある！
• getGroupsByAccount(): AppTopBar内のGroupSwitcherで使われている。与えられたDBAccountが参加しているグループの名前や画像を全部取得する。（参加してるグループ分リクエストが飛ぶ）