const imgEllipse140 = "https://www.figma.com/api/mcp/asset/57ab6a23-3e81-4220-a788-ef7294a6bf6d"; const imgEllipse141 = "https://www.figma.com/api/mcp/asset/7e87a6fc-402e-4e04-b1e9-636ac5c35fee"; const imgUnion = "https://www.figma.com/api/mcp/asset/6b3ebca2-493d-4773-b4a0-06c76ab82aea"; const imgEllipse142 = "https://www.figma.com/api/mcp/asset/876577f7-4a0c-453e-9db9-f31347557eb0"; const imgUnion1 = "https://www.figma.com/api/mcp/asset/d52e5262-6433-4ff4-9b8b-14246aa93010"; const imgEllipse143 = "https://www.figma.com/api/mcp/asset/6d2448f8-8dba-430b-bd8e-cf654acacf15"; const imgUnion2 = "https://www.figma.com/api/mcp/asset/ce79c2e7-e4ca-4361-a110-8a75883b8f32"; const imgRectangle535 = "https://www.figma.com/api/mcp/asset/2be3686b-9a1e-45a8-8794-c47e837c5679"; type SwitchProps = { className?: string; darkTheme?: boolean; enable?: boolean; loading?: boolean; status?: "live" | "off" | "on"; }; export default function Switch({ className, darkTheme = true, enable = true, loading = false, status = "on" }: SwitchProps) { const isDarkThemeAndLiveAndEnableAndNotLoading = darkTheme && status === "live" && enable && !loading; const isDarkThemeAndLiveAndNotEnableAndLoading = darkTheme && status === "live" && !enable && loading; const isDarkThemeAndLiveAndNotEnableAndNotLoading = darkTheme && status === "live" && !enable && !loading; const isDarkThemeAndOffAndEnableAndNotLoading = darkTheme && status === "off" && enable && !loading; const isDarkThemeAndOffAndNotEnableAndLoading = darkTheme && status === "off" && !enable && loading; const isDarkThemeAndOffAndNotEnableAndNotLoading = darkTheme && status === "off" && !enable && !loading; const isDarkThemeAndOnAndNotEnableAndLoading = darkTheme && status === "on" && !enable && loading; const isDarkThemeAndOnAndNotEnableAndNotLoading = darkTheme && status === "on" && !enable && !loading; const isLiveAndEnableAndNotLoading = status === "live" && enable && !loading; const isNotDarkThemeAndLiveAndEnableAndNotLoading = !darkTheme && status === "live" && enable && !loading; const isNotDarkThemeAndLiveAndNotEnableAndLoading = !darkTheme && status === "live" && !enable && loading; const isNotDarkThemeAndLiveAndNotEnableAndNotLoading = !darkTheme && status === "live" && !enable && !loading; const isNotDarkThemeAndOffAndEnableAndNotLoading = !darkTheme && status === "off" && enable && !loading; const isNotDarkThemeAndOffAndNotEnableAndLoading = !darkTheme && status === "off" && !enable && loading; const isNotDarkThemeAndOffAndNotEnableAndNotLoading = !darkTheme && status === "off" && !enable && !loading; const isNotDarkThemeAndOnAndEnableAndNotLoading = !darkTheme && status === "on" && enable && !loading; const isNotDarkThemeAndOnAndNotEnableAndLoading = !darkTheme && status === "on" && !enable && loading; const isNotDarkThemeAndOnAndNotEnableAndNotLoading = !darkTheme && status === "on" && !enable && !loading; return (
{!loading && ((status === "on" && enable) || (status === "off" && enable) || (!darkTheme && status === "off" && !enable)) && }
{(!enable || isLiveAndEnableAndNotLoading) && (
)} {!enable && loading && (
)}
); }SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system. 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens 2. Convert React syntax to the target framework/library 3. Transform all Tailwind classes to the target styling system while preserving exact visual design 4. Follow the project's existing patterns and conventions DO NOT install any Tailwind as a dependency unless the user instructs you to do so. Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: . Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.