Configure Requirements Popup Component (components/Editor/configureRequirementsPopup.tsx)¶

Overview¶

A React component that displays an animated popup dialog for configuring tender requirements. The component provides a user-friendly interface with animated transitions, backdrop blur effects, and responsive buttons for accepting or skipping the configuration process.

Features¶

Animated transitions
Backdrop blur effect
Response handling
State management
Visual feedback
Button interactions
Icon integration
Hover effects
Accessibility support
Responsive design
Spring animations
Exit animations
User confirmation
Error prevention
Cleanup handling

Implementation¶

interface ConfigureRequirementsPopupProps {
  onResponse: (response: boolean) => void
}

export function ConfigureRequirementsPopup({ onResponse }: ConfigureRequirementsPopupProps) {
  const [isVisible, setIsVisible] = useState(true);

  const handleResponse = (response: boolean) => {
    onResponse(response);
    setIsVisible(false);
  }

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ y: "100%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: "100%", opacity: 0 }}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
          className="relative justify-center ml-10 mr-10 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg p-6 rounded-2xl shadow-2xl border border-white border-opacity-30"
        >
          <div className="max-w-md mx-auto">
            <h2 className="text-2xl font-bold mb-4 text-blue-825 text-center">
              Configure Tender Requirements?
            </h2>
            <p className="mb-6 text-gray-600 text-center">
              Would you like to set up the requirements for your tender?
            </p>
            <div className="flex justify-center space-x-4">
              <Button 
                variant="outline" 
                onClick={() => handleResponse(false)}
                className="flex items-center space-x-2 hover:bg-red-50 transition-colors duration-300"
              >
                <XCircle className="w-5 h-5" />
                <span>No, Skip</span>
              </Button>
              <Button 
                onClick={() => handleResponse(true)}
                className="flex items-center space-x-2 bg-green-500 hover:bg-green-600 transition-colors duration-300"
              >
                <CheckCircle className="w-5 h-5" />
                <span>Yes, Configure</span>
              </Button>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Dependencies¶

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { CheckCircle, XCircle } from 'lucide-react'

Components Used¶

Notes¶

Uses Framer Motion for animations
Implements backdrop blur effect
Handles user responses
Provides visual feedback
Supports keyboard navigation
Uses spring animations
Manages visibility state
Ensures accessibility
Implements hover effects
Cleans up on unmount