Product Details Disclosure

Build a product details component that displays a summary and an expandable details panel. When the user toggles the details panel, it should transition smoothly, and the displayed product information should remain visible during closing transitions to prevent visual flicker.

Requirements

Component Structure

• Display a product summary showing the product name and price
• Include a "Show Details" button that toggles a details panel below the summary
• The details panel displays the product's full description and specifications
• When the button is clicked, the panel should smoothly transition open (entering over 300ms)
• When clicked again, the panel should smoothly transition closed (leaving over 200ms)

State Freezing During Transitions

• While the details panel is transitioning closed, it must continue displaying the product information
• The product details should remain visible throughout the entire closing animation
• Do not clear or hide the content until the closing transition fully completes
• This prevents visual flicker where the panel would be empty during the close animation

Sample Product Data

Use this sample product data for the component:

const sampleProduct = {
  name: "Wireless Headphones",
  price: "$129.99",
  description: "Premium wireless headphones with active noise cancellation",
  specifications: "Battery: 30 hours, Bluetooth 5.0, Weight: 250g"
};

Test Cases

• The details panel opens when the button is clicked and displays product information @test
• The details panel closes when the button is clicked again @test
• During the closing transition, the product information remains visible until the animation completes @test

Implementation

@generates

API

/**
 * A product details disclosure component with state-frozen transitions
 * Displays a summary and toggleable details panel
 */
export function ProductDetails(): JSX.Element;

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible, unstyled UI components with transition support and state management.