const imgSubtract = "https://www.figma.com/api/mcp/asset/f430266b-9a05-441c-8f34-167e082c90a5"; const imgUnion = "https://www.figma.com/api/mcp/asset/37663477-da87-4813-8c77-620dae9aa74a"; const img = "https://www.figma.com/api/mcp/asset/9ec824ae-de0c-4cc6-aedd-94cd8d3ed5a0"; const imgSubtract1 = "https://www.figma.com/api/mcp/asset/f1de83dd-d398-416d-ac4b-c61f30549f8a"; const imgUnion1 = "https://www.figma.com/api/mcp/asset/a588a15b-33b1-4620-8984-394370b3613e"; const img1 = "https://www.figma.com/api/mcp/asset/7c2766f5-79c2-487e-a81c-2de0e77a0f9f"; const img2 = "https://www.figma.com/api/mcp/asset/7d0b61f9-f325-4ca8-a994-0b6100cfa5bf"; const img3 = "https://www.figma.com/api/mcp/asset/fe08bcf2-4830-49ce-a8a4-d6cb2642a0d4"; const img4 = "https://www.figma.com/api/mcp/asset/9fbfb00e-ec4a-4468-9420-469b539cb7df"; const img5 = "https://www.figma.com/api/mcp/asset/445c733a-ad63-4193-bcd1-cdbd25389d24"; type NotificationProps = { className?: string; children?: React.ReactNode | null; status?: "side pop" | "error" | "info" | "quick confirm" | "warning" | "pop confirm" | "secondary warning"; theme?: "dark" | "light"; }; export default function Notification({ className, children = null, status = "warning", theme = "dark" }: NotificationProps) { const isDarkAndError = theme === "dark" && status === "error"; const isDarkAndInfo = theme === "dark" && status === "info"; const isDarkAndPopConfirm = theme === "dark" && status === "pop confirm"; const isDarkAndQuickConfirm = theme === "dark" && status === "quick confirm"; const isDarkAndSecondaryWarning = theme === "dark" && status === "secondary warning"; const isDarkAndSidePop = theme === "dark" && status === "side pop"; const isDarkAndWarning = theme === "dark" && status === "warning"; const isLight = theme === "light"; const isLightAndError = theme === "light" && status === "error"; const isLightAndInfo = theme === "light" && status === "info"; const isLightAndPopConfirm = theme === "light" && status === "pop confirm"; const isLightAndQuickConfirm = theme === "light" && status === "quick confirm"; const isLightAndSecondaryWarning = theme === "light" && status === "secondary warning"; const isLightAndSidePop = theme === "light" && status === "side pop"; const isLightAndWarning = theme === "light" && status === "warning"; return (
{status === "side pop" && (

This is the title

)} {isDarkAndWarning && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isDarkAndSecondaryWarning && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isLightAndWarning && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isLightAndSecondaryWarning && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isDarkAndError && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isLightAndError && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isDarkAndPopConfirm && ( <>
{children || ( <>

This is the title

Are you sure you want to delete XXXX? All the events can not be recovered.

)}

Cancel

Delete

)} {isLightAndPopConfirm && ( <>
{children || ( <>

This is the title

Are you sure you want to delete XXXX? All the events can not be recovered.

)}

Cancel

Delete

)} {isDarkAndQuickConfirm && ( <>
{children || ( <>

Are you sure you want to delete ‘XXXX’?

)}

Cancel

Delete

)} {isLightAndQuickConfirm && ( <>
{children || ( <>

Are you sure you want to delete ‘XXXX’?

)}

Cancel

Delete

)} {isDarkAndSidePop && (
{children || (

Are you sure you want to delete XXXX?

All the events can not be recovered.

)}
)} {isLightAndSidePop && (
{children || (

Are you sure you want to delete XXXX?

All the events can not be recovered.

)}
)} {isDarkAndInfo && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)} {isLightAndInfo && ( <>
{children || ( <>

This is the title

Though I speak with the tongues of men and of angels, and have not charity ?

)}

Cancel

Confirm

)}
); }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"`.These styles are contained in the design: Roboto/16 pop title: Font(family: "Roboto", style: SemiBold, size: 16, weight: 600, lineHeight: 1.5, letterSpacing: 0), Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0), L3 shadow: Effect(type: DROP_SHADOW, color: #00000008, offset: (0, 12), radius: 48, spread: 16); Effect(type: DROP_SHADOW, color: #0000000D, offset: (0, 9), radius: 28, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 6), radius: 16, spread: -8).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.