Accordion

export default function Accordion ({ items = [] }) {
  return (<ul><li>items here...</li></ul>)
}

const exampleData = [
  ['Italian cuisine: A Symphony of flavors', 'Italian cuisine is a celebration of life\’s simplest pleasures, brought to life through a harmony of rich flavors and fresh ingredients. Known for its regional diversity, from the creamy risottos of the North to the zesty citrus-infused dishes of the South, Italian food is a testament to the country\'s rich cultural heritage. At its heart lies pasta, in all its glorious forms, each dish telling a story of tradition and family. Whether it\'s the comforting embrace of a lasagna or the elegant simplicity of a Caprese salad, Italian cuisine invites you into a world where food is not just nourishment but an art form, meant to be savored with every bite.'],
  ['Japanese cuisine', 'Japanese cuisine is a poetic journey through taste and tradition, where the aesthetic presentation complements the delicate balance of flavors. It\'s a culinary tradition that emphasizes seasonal ingredients, purity, and minimalism, inviting diners to appreciate the intrinsic flavors of each component. From the precision of sushi, a testament to the harmony between rice, fish, and wasabi, to the comforting warmth of a bowl of ramen, Japanese food is an adventurous exploration of textures and tastes. Beyond just food, it\'s a philosophy of balance and respect for ingredients, presented to you in dishes that are as visually stunning as they are delectably satisfying.'],
  ['Mexican cuisine', 'Mexican cuisine is a colorful tapestry of indigenous and Spanish influences, bursting with bold flavors and hearty ingredients. It\'s a culinary fiesta where each dish resonates with the vibrant soul of its people, from the smoky depth of a mole sauce to the fresh zing of a ceviche. Staples such as corn, beans, and chili peppers are elevated through time-honored techniques into comfort food that feels like a warm embrace. Whether it\'s the communal joy of sharing a plate of tacos or savoring the intricate layers of a tamale, Mexican food is an invitation to celebrate life with every meal, offering a taste of warmth and conviviality.']
]

export default exampleData

export { default } from './Accordion'

import Accordion from '@/components/Accordion'

export default function AccordionPage () {
  const exampleData = []
  return (
    <main>
      <h1>Accordion</h1>
      <Accordion items={exampleData} />
    </main>
  )
}

import Accordion from '@/components/Accordion'

// 'flex flex-col gap-8' will display the element as a flex box
// where the children are stacked vertically with a gap of 2rem

// 'p-4 sm:p-24' will add padding to the main element, smaller
// screens will have a padding of 1rem, while larger screens will
// have a padding of 6rem

// 'text-xl font-bold' will set the font size to 1.25rem and the
// font weight to bold

export default function AccordionPage () {
  const exampleData = []
  return (
    <main className="flex flex-col gap-8 p-4 sm:p-24">
      <h1 className="text-xl font-bold">Accordion</h1>
      <Accordion items={exampleData} />
    </main>
  )
}

import Accordion from '@/components/Accordion'
import exampleData from '@/components/Accordion/example-data' // <- add this line

export default function AccordionPage () {
  // const exampleData = [] <- remove this line
  return (
    <main className="flex flex-col gap-8 p-4 sm:p-24">
      <h1 className="text-xl font-bold">Accordion</h1>
      <Accordion items={exampleData} />
    </main>
  )
}

export default function Accordion ({ items = [] }) {
  return (
    <ul>
      {items.map (([summary, body]) => (<li key={summary}>[{summary}] [{body}]</li>))}
    </ul>
  )
}

// replace the content of the <li> elements with <details> elements

export default function Accordion ({ items = [] }) {
  return (
    <ul>
      {items.map (([summary, body]) => (
        <li key={summary}>
          <details>
            <summary>{summary}</summary>
            <p>{body}</p>
          </details>
        </li>)
      )}
    </ul>
  )
}

import { useRef } from 'react'

export default function Accordion ({ items = [] }) {
  // The react useRef hook can be used to create a
  // reference to a DOM element
  const ref = useRef ()

  // Handler for the onToggle event, just logging
  // the event for now to see if it works
  const handleExpansion = (event) => {
    console.log ('captured toggle event in', ref?.current)
    console.log ('expanded:', event.target)
  }

  return (
    // reference the <ul> element and capture onToggle events
    // fired by its children
    <ul ref={ref} onToggle={handleExpansion}>
      {items.map (([summary, body]) => (
        <li key={summary}>
          <details>
            <summary>{summary}</summary>
            <p>{body}</p>
          </details>
        </li>))
      }
    </ul>
  )
}

'use client' // <- add this string to the top of the file
export { default } from './Accordion'

// ...
const handleExpansion = (event) => {
  // Find all open details element, ref.current is the <ul> element
  const opened = ref?.current.querySelectorAll ('details[open]') || []

  // The details element that fired the event
  const details = event.target

  // Iterate all opened details elements and close them
  for (const elem of opened) {
    if (elem !== details) {
      elem.open = false
    }
  }

}
// ...

import { useRef } from 'react'

export default function Accordion ({ items = [] }) {
  const ref = useRef ()

  const handleExpansion = (event) => {
    const opened = ref?.current.querySelectorAll ('details[open]') || []
    // Before we could rely on event.target being the details element
    // but now we need to find the closest details element
    const details = event.target.closest ('details')

    if (details) {
      for (const elem of opened) {
        if (elem !== details) {
          elem.open = false
        }
      }
    }
  }

  return (
    // capture the click event instead
    <ul ref={ref} onClick={handleExpansion}>
      {items.map (([summary, body]) => (
        <li key={summary}>
          <details>
            <summary>{summary}</summary>
            <p>{body}</p>
          </details>
        </li>))
      }
    </ul>
  )
}

import { useRef } from 'react'

// Add a property to the Accordion, isMultiSelect, which, if true, will
// allow the user to select multiple items at once
export default function Accordion ({ items = [], isMultiSelect = false }) {
  const ref = useRef ()

  const handleExpansion = (event) => {
    const opened = ref?.current.querySelectorAll ('details[open]')
    const details = event.target.closest ('details')

    if (details) {
      for (const elem of opened) {
        if (elem !== details) {
          elem.open = false
        }
      }
    }
  }

  return (
    // only add the event handler if it is a single-select accordion
    <ul ref={ref} onClick={!isMultiSelect ? handleExpansion : undefined}>
      {items.map (([summary, body]) => (
        <li key={summary}>
          <details>
            <summary>{summary}</summary>
            <p>{body}</p>
          </details>
        </li>))
      }
    </ul>
  )
}

import Accordion from '@/components/Accordion'
import exampleData from '@/components/Accordion/example-data'

export default function AccordionPage () {
  return (
    <main className="flex flex-col gap-8 p-4 sm:p-24">
      <h1 className="text-xl font-bold">Accordion</h1>

      <h2 className="text-lg font-bold">Single Select</h2>
      <Accordion items={exampleData} />

      <h2 className="text-lg font-bold">Multi Select</h2>
      <Accordion items={exampleData} isMultiSelect />
    </main>
  )
}

import { useRef, useState } from 'react'

export default function Accordion ({ items = [], isMultiSelect = false }) {

  // ...

  return (
    <ul ref={ref} onClick={!isMultiSelect ? handleExpansion : undefined}>
      {items.map (([summary, body], index) => (
        {/* Create a border around the <li> elements and add some padding */}
        <li className="border p-2" key={summary}>
          <details>
            {/*
              list-none: do not render the default arrows
              flex: render the children in a flex layout
              justify-between: make space between the summary and indicators
              items-center: vertically align the items
            */}
            <summary className="list-none flex justify-between items-center">
              <p>{summary}</p>
              {/*
                Add a plus or minus sign to indicate if the details are open
                or closed, based on some currently non-existing isOpen state...
              */}
              <p className="text-2xl">{/* isOpen ? '-' : '+' */}</p>
            </summary>
            {/* add some padding to the body */}
            <p className="p-2">{body}</p>
          </details>
        </li>))
      }
    </ul>
  )
}