「デザイン」に関連した事

Inputタグ内のアイコンは絶対値で作らない

絶対値 の場合

inputタグの中に絶対値でアイコンを置く場合、絶対値の微調整が必要なのでレスポンシブでデザインが崩れがちになる

flexの場合：

divタグの中にアイコンとinputタグをflexで並べる。つまりdivタグ自体をSearchBOXのように扱う
レスポンシブでも崩れづらい

    <div className="flex items-center gap-2 rounded-md ring-1 p-2 focus-within:ring-2 ring-gray-400">
      <Search className="size-4 text-gray-500"/>
      <input type="text" id="search" className="outline-none" placeholder="search" />
    </div>

重要：div自体をinputのように扱うので、inputタグからは outline-none でアウトラインを消す

関連知識：X（クリア）アイコン

inputタグのtype="search"にすると、文字入力後にデフォルトで X (クリア)が表示されるので自分で用意する必要がない。アイコンの視認性が低いが、デザイン自体はCSSファイルで調整できる。
しかし、Reactのset関数とリンクさせることができないのでクリアにより状態を変更したい場合はカスタム実装することになる。

transitionはallだけでいいのか

transition-all
transition-colors
transition-opacity
transition-shadow
transition-transform

transition-all は他のtransitionをすべてカバーしているので、色（color）だと transition-colors、回転（rotate）だと transition-tranformのように、わざわざ使い分けるよりもtransition-all で習慣づけても構わないのでは

-->

デメリット：パフォーマンス

transition-all は（transitionが適用可能な）全てのプロパティにトランジションを適用しようとするので場合によっては負荷がかかる。
細かく気にする必要は無いが、大量のCardがあるような場合は注意が必要

開閉UI：１つのアイコンだけ使う

２つのアイコンを状態により表示/非表示する場合：

{ isOpen ? <上矢印 /> : <下矢印 /> }

１つのアイコンを状態によりrotateさせる場合：

      <ChevronRight
        onClick={onToggle}
        className={cn(
          "absolute size-7 rounded-full bottom-1/2 -right-3 cursor-pointer dark:bg-slate-700 hover:bg-accent-color-extra-light bg-slate-100 border transition-all duration-300",
          isOpen ? "rotate-0" : "rotate-180"
        )}
      />

こっちはコードが短くなる + transitionのアニメーションが使える

Design：