Developing the Components

This project has 5 reusable components, each handling one specific job:

• Navbar.jsx manages the top navigation bar using the drawerOpen state. On desktop, it shows the logo, user name, and logout button inline; on mobile, it hides those and shows just the logo, user icon, and a hamburger button, which toggles drawerOpen to slide in a side menu from the right containing the user info and logout option.

• StarRating.jsx is a simple read-only component that takes a value prop and displays filled or unfilled stars using .map() — used wherever a rating needs to be shown, like on product cards and the admin table.

• StarInput.jsx is the interactive version — it uses useState to track hover and lets the user click a star to set the rating, giving that smooth fill-on-hover effect used inside the review modal.

• ProductCard.jsx displays a single product's image, description, stock status, and rating (using StarRating), and includes a Select button that calls the onSelect prop passed down from the parent, which opens the review modal for that specific product.

• ReviewModal.jsx is the popup that appears after selecting a product. It uses useState to manage the rating, text, and submitted status, uses StarInput for the rating selection, and on submit, uses setTimeout to briefly show a success message before automatically closing the modal via the onClose prop.