Reactjs 为什么我的 Next.js (React) 组件只有在页面中时才有效

在我的Next.js项目中，我正在用TailWind CSS做圆圈，这样我就可以有不同状态的switch .

interface Status {
  status: "online" | "offline" | "idle" | "dnd";
}
const StatusCircle = ({ status }: Status) => {
  return (
    <>
      <div className="flex items-center justify-center">
        <div
          className={`m-3 flex h-40 w-40 items-center justify-center rounded-full ${
            status == "online"
              ? "bg-green-500"
              : status == "offline"
              ? "bg-gray-500"
              : status == "idle"
              ? "bg-orange-400"
              : status == "dnd"
              ? "bg-red-500"
              : "bg-gray-500"
          }`}
        ></div>
      </div>
    </>
  );
};

export default StatusCircle;

这是在尾风playground 工作的圆圈的代码.我把它粘贴到我的页面上，但我的页面不会只是一个圆形，所以我试图将这个圆形作为一个组件，并将其import粘贴到页面中，这是:

import StatusCircle from "@/components/StatusCircle";

const Page = () => {
  return (
    <>
      <StatusCircle status="online" />
      <div className="m-3 flex h-2 w-2 items-center justify-center rounded-full bg-red-500"></div>
    </>
  );
};

export default Page;

当我在dev工具中查看时，我确实有组件，但它没有显示为一个圆圈.

After I changed the state and test, only "dnd" is shown but not "idle", "offline" and "online" even though the tailwind is correct