Accordion

Here is Accordion component

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

const items = [
  {
    name: 'Richard Payne',
    email: 'pwright@yahoo.com',
    avatarImage: 'https://cdn.21st.dev/assets/mirror/03/03a7fd80e48b0c266374a64bc634dbbb85582fd0dd77c1a27ecff4bb5406ff81.png',
    content:
      'Richard Payne is a remarkable individual known for his exceptional skills and expertise in various fields. With a strong background in technology and a passion for innovation, Richard has made significant contributions to the industry.'
  },
  {
    name: 'Jordan Stevenson',
    email: 'wramirez@outlook.com',
    avatarImage: 'https://cdn.21st.dev/assets/mirror/ae/ae6a92c60e520aa6a3fe089f29762926b8851effbc1d39107437dae04aa88ae3.png',
    content:
      'Jordan Stevenson is a talented individual with a passion for technology and innovation. Jordan has made significant contributions to various projects and has a deep understanding of programming languages and frameworks.'
  },
  {
    name: 'Nicholas Tanner',
    email: 'snguyen@icloud.com',
    avatarImage: 'https://cdn.21st.dev/assets/mirror/2f/2fcafa6e39ea7272850e186aa5d39db75cba438a6a1194b908bc5a1385dd41bf.png',
    content:
      'Nicholas Tanner is a highly skilled individual with a strong passion for technology and innovation. Nicholas has made significant contributions to numerous projects and possesses a deep understanding of various programming languages and frameworks.'
  }
]

const AccordionAvatarDemo = () => {
  return (
    <Accordion type='single' collapsible className='w-full' defaultValue='item-1'>
      {items.map((item, index) => (
        <AccordionItem key={index} value={`item-${index + 1}`}>
          <AccordionTrigger className='items-center hover:no-underline'>
            <span className='flex items-center gap-4'>
              <Avatar className='size-10.5 rounded-sm'>
                <AvatarImage src={item.avatarImage} alt={item.name} className='rounded-sm' />
                <AvatarFallback className='rounded-sm text-xs'>
                  {item.name.split(/\s/).reduce((response, word) => (response += word.slice(0, 1)), '')}
                </AvatarFallback>
              </Avatar>
              <span className='flex flex-col space-y-0.5'>
                <span>{item.name}</span>
                <span className='text-muted-foreground font-normal'>{item.email}</span>
              </span>
            </span>
          </AccordionTrigger>
          <AccordionContent className='text-muted-foreground'>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

export default AccordionAvatarDemo