figma_buttons_props.tsx

import {
  useActiveBreakpoint,
  defineProperties,
} from "figma:react";

function Frame3Desktop() {
  return (
    <div className="content-stretch flex items-center justify-center relative size-full">
      <div className="flex flex-col font-['Rethink_Sans:Medium','Noto_Sans_JP:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[30px] text-black text-center text-nowrap tracking-[-0.6px]">
        <p className="leading-[1.2] whitespace-pre">
          デフォで非表示のテキスト
        </p>
      </div>
    </div>
  );
}

function Frame3Tablet() {
  return (
    <div className="content-stretch flex items-center justify-center relative size-full">
      <div className="flex flex-col font-['Rethink_Sans:Medium','Noto_Sans_JP:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[30px] text-black text-center text-nowrap tracking-[-0.6px]">
        <p className="leading-[1.2] whitespace-pre">
          デフォで非表示のテキスト
        </p>
      </div>
    </div>
  );
}

function Frame3Mobile() {
  return (
    <div className="content-stretch flex items-center justify-center relative size-full">
      <div className="flex flex-col font-['Rethink_Sans:Medium','Noto_Sans_JP:Medium',sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[30px] text-black text-center text-nowrap tracking-[-0.6px]">
        <p className="leading-[1.2] whitespace-pre">
          デフォで非表示のテキスト
        </p>
      </div>
    </div>
  );
}

function Frame({ isVisible = false }) {
  const { width } = useActiveBreakpoint();
  if (!isVisible) {
    return null;
  }
  if (width < 800) {
    return <Frame3Mobile />;
  }
  if (width < 1280) {
    return <Frame3Tablet />;
  }
  return <Frame3Desktop />;
}

defineProperties(Frame, {
  isVisible: {
    type: "boolean",
    defaultValue: false,
  },
});

export default Frame;