shadcnのアイコン = Lucide

Lucide: https://lucide.dev/icons/bar-chart-3 で確認できる

アイコンにカラーをつける :

<Swords color={"#d8bc03"}/>

{}は無くていい

docs : https://lucide.dev/guide/basics/color

デフォルトでAccordionをオープン

<Accordion
        type="single"
        collapsible
        className="border my-2 p-3"
        defaultValue="item-1"
        >
<AccordionItem value="item-1">

<Accordion defaultValue="item-1" >と <AccordionItem value="item-1"> の値が一致していればOPENになる模様

Toaster（= 画面右下のポップアップ）

Providerのように上部ファイルにToasterコンポーネントを置けば、下層ファイルに機能が適用される仕組み

<main className="min-h-screen sm:w-2/3 mx-auto w-full p-3">
              {children}
              <Toaster />

１npx shadcn-ui@latest add sonner

２ Toasterを使いたいファイルでは import { toast } from "sonner"

例:

import { toast } from "sonner";

<button
        type="submit"
        onClick={() =>
          toast("追加したよ", {
            description: "追加完了",
            action: {
              label: "OK",
              onClick: () => console.log("OK"),
            },
          })
        }
      >
        hogege
</button>

• ＊ onClick: () => console.log("OK") 　この部分は消さないこと。OKボタンを押してToaterを消すのに必要

レスポンシブ時にtdが消える　<TableCell>

• shadcnの<Table>コンポーネントではデフォでtdにp-4がでついている　
• なので<TableHead>がw-[30]等の大きさだと、レスポンシブで内容が消えてしまう

<td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 py-2 px-4 border-b text-base">

• 対策：p-0

<TableCell className="p-0">