Dropdown Component Showcase

Introduction

The Dropdown component is a versatile and customizable component that can be used to create dropdown menus with smooth animations and various styles. Below are examples demonstrating different configurations, including fade, scale, and slide animations.

Usage Examples

Fade Animation

Option 1
Option 2
Option 3

<Dropdown
  label="Fade Animation"
  options={['Option 1', 'Option 2', 'Option 3']}
  onSelect={(option) => setSelectedOption(option)}
  animationType="fade"
/>

Scale Animation

Option 1
Option 2
Option 3

<Dropdown
    label="Scale Animation"
    itemClassName='hover:bg-blue-300'
    className='bg-gradient-to-br from-primary-light to-secondary-light rounded-md'
    options={['Option 1', 'Option 2', 'Option 3']}
    onSelect={(option) => setSelectedOption(option)}
    animationType="scale"
/>

Slide Animation

Option 1
Option 2
Option 3

<Dropdown
    label="Slide Animation"
    className='bg-accent-light rounded-md'
    buttonClassName='text-background-dark'
    itemClassName='hover:bg-red-300'
    options={['Option 1', 'Option 2', 'Option 3']}
    onSelect={(option) => setSelectedOption(option)}
    animationType="slide"
/>

Custom Styled Dropdown

Custom 1
Custom 2
Custom 3

<Dropdown
    label="Custom Styled"
    options={['Custom 1', 'Custom 2', 'Custom 3']}
    onSelect={(option) => setSelectedOption(option)}
    animationType="fade"
    className="w-64"
    buttonClassName="bg-purple-600 text-white"
    listClassName="bg-purple-50"
    itemClassName="hover:bg-purple-200"
/>