💄放送一覧ページをスタイリングしました。

yossydev commented 2 years ago

ご確認お願いします。

yossydev commented 2 years ago

再度修正しました！

全然今のままでもOKなんですが、labelの形は３パターンで固定されているのでPropsをシンプルに

export type Props = {
  type: 'broadcasting' | 'beforeBroadcasting' | 'afterBroadcasting';
};
にしてコンポーネントの中で見栄えをSwithさせたほうがスッキリしそうかなーと思いました。

こちらの部分に関してif文を使ったのですが、こんな感じでよかったでしょうか？？

ご確認よろしくお願いします。

hiraoka120 commented 2 years ago

@Utopia300 いいですね！ただ、空のdivを返すのは戻り値をJSX.Elementとして定義してるからかなと思うんですが、コンポーネントを呼ぶ側としては望む結果ではないので以下のようにdefaultを 放送中にしていいのかなと思います。引数の型で縛ってるので予期しない値こないので問題ないかなと。

export const Label = (props: Props): JSX.Element => {
  const { type } = props;
  switch (type) {
    case 'beforeBroadcasting':
      return(
        <div className="text-sm text-red-600 py-1 px-3 bg-yellow-100 rounded-2xl">
          <span>放送前・エンジビア募集</span>
        </div>
      );
    case 'afterBroadcasting':
      return(
        <div className="text-sm py-1 px-3 bg-gray-200 rounded-2xl">
          <span>放送後</span>
        </div>
      );
    default:
      return (
        <div className="text-green-600 px-3 bg-green-200 rounded-2xl">
          <span>放送中</span>
        </div>
      );
  };
};

yossydev commented 2 years ago

@hiraoka120 修正しました！

こんな書き方もあったんですね！すごい勉強になります！

hiraoka120 commented 2 years ago

LGTMです！コンフリクト解消してマージしちゃってください✨

Pride-of-Kansai / trivia-project

💄放送一覧ページをスタイリングしました。 #45