Accordion

import {
  AccordionBlock,
  type AccordionBlockItem,
} from "mako-ui/blocks/accordion";

const items: AccordionBlockItem[] = [
  {
    content: (
      <p>
        Three criteria determine the useful life of a safety helmet: the shell
        material, exposure to UV and temperature, and the date it entered
        service.
      </p>
    ),
    tagLabel: "Popular",
    title: "How is the lifespan of a helmet calculated?",
  },
  {
    content: (
      <p>
        The shell carries a moulded manufacturing date. Storage life runs from
        that date, service life from first use.
      </p>
    ),
    title: "Where do I find the manufacturing date?",
  },
  {
    content: (
      <p>
        A visual check before every use, and a documented audit at every
        equipment renewal.
      </p>
    ),
    title: "How often should a helmet be inspected?",
  },
];

export default function Particle() {
  return (
    <AccordionBlock
      items={items}
      subtitle="The questions we hear most often."
      title="Frequently asked questions"
    />
  );
}

import {
  AccordionBlock,
  type AccordionBlockItem,
} from "mako-ui/blocks/accordion";

const items: AccordionBlockItem[] = [
  {
    content: <p>Cutting tools, abrasives, and machining accessories.</p>,
    title: "Machining",
  },
  {
    content: <p>Helmets, gloves, eyewear and hearing protection.</p>,
    title: "Personal protection",
  },
  {
    content: <p>Bearings, belts, chains and transmission components.</p>,
    title: "Power transmission",
  },
];

export default function Particle() {
  return <AccordionBlock items={items} multiple />;
}