Accordion

1"use client";2
3import {4  ArrowsRotateLeft,5  Box,6  ChevronDown,7  CreditCard,8  PlanetEarth,9  Receipt,10  ShoppingBag,11} from "@gravity-ui/icons";12import { Accordion } from "@lenso/ui";13import * as stylex from "@stylexjs/stylex";14
15const styles = stylex.create({16  root: { width: "100%", maxWidth: 448 },17  icon: { width: 16, height: 16, flexShrink: 0, marginInlineEnd: 12, color: "var(--muted)" },18});19const items = [20  {21    title: "How do I place an order?",22    Icon: ShoppingBag,23    content:24      "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase.",25  },26  {27    title: "Can I modify or cancel my order?",28    Icon: Receipt,29    content:30      "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes.",31  },32  {33    title: "What payment methods do you accept?",34    Icon: CreditCard,35    content: "We accept all major credit cards, including Visa, Mastercard, and American Express.",36  },37  {38    title: "How much does shipping cost?",39    Icon: Box,40    content:41      "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50.",42  },43  {44    title: "Do you ship internationally?",45    Icon: PlanetEarth,46    content:47      "Yes, we ship to most countries. Please check our shipping rates and policies for more information.",48  },49  {50    title: "How do I request a refund?",51    Icon: ArrowsRotateLeft,52    content:53      "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance.",54  },55];56export function Basic() {57  return (58    <Accordion xstyle={styles.root}>59      {items.map(({ title, content, Icon }) => (60        <Accordion.Item key={title} value={title}>61          <Accordion.Heading>62            <Accordion.Trigger>63              <Icon aria-hidden="true" {...stylex.props(styles.icon)} />64              {title}65              <Accordion.Indicator>66                <ChevronDown />67              </Accordion.Indicator>68            </Accordion.Trigger>69          </Accordion.Heading>70          <Accordion.Panel>71            <Accordion.Body>{content}</Accordion.Body>72          </Accordion.Panel>73        </Accordion.Item>74      ))}75    </Accordion>76  );77}

1"use client";2export { Surface } from "./source";

1"use client";2export { WithoutSeparator } from "./source";

1"use client";2export { Multiple } from "./source";

1"use client";2export { Disabled } from "./source";

1"use client";2export { Controlled } from "./source";

1"use client";2export { CustomIndicator } from "./source";

1"use client";2export { RenderFunction } from "./source";

1"use client";2export { FAQ } from "./source";

1"use client";2export { CustomStyles } from "./source";