finshing architecture for project now we have all layers to build profitionl project app,components ,hooks ,lib,services,styel ,types

Components/UI/Alert.tsx

@@ -0,0 +1,59 @@
+// Typed, accessible alert banner with optional dismiss button.
+
+import { cn } from "../../lib/utils";
+
+export type AlertType = "error" | "info" | "success" | "warning";
+
+export interface AlertProps {
+  type?: AlertType;
+  title?: string;
+  message: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+const config: Record<AlertType, { bg: string; icon: string; iconLabel: string }> = {
+  error:   { bg: "bg-red-50 border-red-200 text-red-700",         icon: "⚠", iconLabel: "Error" },
+  info:    { bg: "bg-blue-50 border-blue-200 text-blue-700",      icon: "ℹ", iconLabel: "Info" },
+  success: { bg: "bg-emerald-50 border-emerald-200 text-emerald-700", icon: "✓", iconLabel: "Success" },
+  warning: { bg: "bg-amber-50 border-amber-200 text-amber-700",   icon: "!", iconLabel: "Warning" },
+};
+
+/**
+ * @example
+ * <Alert type="error" message="Invalid credentials." onClose={() => setErr(null)} />
+ * <Alert type="success" title="Saved!" message="Your changes have been applied." />
+ */
+export function Alert({ type = "error", title, message, onClose, className }: AlertProps) {
+  const { bg, icon, iconLabel } = config[type];
+
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className={cn(
+        "flex items-start gap-2 border rounded-[var(--radius-md)] px-3 py-2.5 text-[12px] font-medium",
+        bg,
+        className,
+      )}
+    >
+      <span aria-label={iconLabel} className="flex-shrink-0 mt-0.5">
+        {icon}
+      </span>
+      <div className="flex-1 min-w-0">
+        {title && <p className="font-semibold mb-0.5">{title}</p>}
+        <p>{message}</p>
+      </div>
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Dismiss alert"
+          className="flex-shrink-0 opacity-60 hover:opacity-100 text-[16px] leading-none transition-opacity"
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}