Fix organization setup flow: redirect to onboarding for incomplete setup
This commit is contained in:
50
components/figma/FigmaAlert.tsx
Normal file
50
components/figma/FigmaAlert.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
|
||||
// Figma-based Alert component with proper CSS variables and styling
|
||||
interface FigmaAlertProps {
|
||||
title: string;
|
||||
variant?: 'success' | 'error' | 'warning' | 'info';
|
||||
children?: React.ReactNode;
|
||||
onClose?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const FigmaAlert: React.FC<FigmaAlertProps> = ({
|
||||
title,
|
||||
variant = 'info',
|
||||
children,
|
||||
onClose,
|
||||
className = ''
|
||||
}) => {
|
||||
const getBorderColor = () => {
|
||||
switch (variant) {
|
||||
case 'success': return 'bg-Other-Green';
|
||||
case 'error': return 'bg-red-500';
|
||||
case 'warning': return 'bg-yellow-500';
|
||||
default: return 'bg-blue-500';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`p-4 relative bg-Other-White rounded-lg shadow-[0px_2px_2px_-1px_rgba(10,13,18,0.04)] shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.03)] shadow-[0px_12px_16px_-4px_rgba(10,13,18,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-center items-center gap-2.5 overflow-hidden ${className}`}>
|
||||
<div className="w-96 max-w-96 justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
|
||||
{title}
|
||||
{children && <div className="mt-1 text-xs text-Neutrals-NeutralSlate600">{children}</div>}
|
||||
</div>
|
||||
|
||||
{onClose && (
|
||||
<button onClick={onClose} className="flex-shrink-0">
|
||||
<div data-svg-wrapper className="relative">
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6663 5.83325L6.33301 14.1666M6.33301 5.83325L14.6663 14.1666" stroke="var(--Neutrals-NeutralSlate600, #535862)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className={`w-2 h-32 left-[-4px] top-[-41px] absolute ${getBorderColor()}`} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FigmaAlert;
|
||||
Reference in New Issue
Block a user