Banner (components/ui/Banner.tsx)¶

Overview¶

A notification banner component that displays messages with success and error states, featuring animations and auto-dismissal.

Features¶

Success and error states
Auto-dismissal for success messages
Manual close button for errors
Animated transitions
Customizable messages
Timed auto-hide
Motion effects
Responsive design
Shadow effects
Flexible styling

Dependencies¶

import React, { useState, useEffect } from "react"
import { motion } from "framer-motion"

Props¶

interface BannerProps {
  message: string | null | undefined;
  success?: boolean;
  onClose?: () => void;
}

Implementation¶

State Management¶

const [visible, setVisible] = useState(true);

useEffect(() => {
  if (success) {
    setVisible(true);
    const timer = setTimeout(() => {
      setVisible(false);
    }, 3000);
    return () => {
      clearTimeout(timer);
    };
  } else {
    setVisible(true);
  }
}, [success]);

Methods¶

const handleClose = () => {
  setVisible(false);
  if (onClose) onClose();
};

Unique Functionality¶

Auto-dismissal timer for success messages
Manual close option for error messages
Visibility state management
Animation transitions
Conditional rendering

HTML Structure¶

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.5 }}
  style={{
    backgroundColor: success
      ? "rgba(76, 175, 80, 0.8)"
      : "rgba(244, 67, 54, 0.8)",
    color: "white",
    padding: "10px",
    marginBottom: "10px",
    textAlign: "center",
    display: "flex",
    justifyContent: "space-between",
    borderRadius: "5px",
    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
  }}
>
  <span style={{ textAlign: "center" }}>{message}</span>
  {!success && (
    <button
      style={{
        backgroundColor: "transparent",
        border: "none",
        color: "inherit",
        cursor: "pointer",
      }}
      onClick={handleClose}
    >
      &#x2716;
    </button>
  )}
</motion.div>

API Integration¶

No direct API integration required.

Components Used¶

motion.div from framer-motion

Notes¶

Uses Framer Motion for animations
Implements auto-dismissal timer
Provides manual close option
Handles visibility states
Cleans up timers on unmount
Uses inline styles for styling