import { Accordion } from "lambda-ui-components";

export default function App() {
	return (
		<Accordion defaultValue="item-1">
			<Accordion.Item value="item-1">
				<Accordion.Header>What is Lambda UI?</Accordion.Header>
				<Accordion.Content>
					Lambda UI is a modern React component library designed for building beautiful user interfaces.
				</Accordion.Content>
			</Accordion.Item>
			<Accordion.Item value="item-2">
				<Accordion.Header>How do I install it?</Accordion.Header>
				<Accordion.Content>
					You can install Lambda UI using npm or pnpm: npm install lambda-ui-components
				</Accordion.Content>
			</Accordion.Item>
			<Accordion.Item value="item-3">
				<Accordion.Header>Is it customizable?</Accordion.Header>
				<Accordion.Content>
					Yes! Lambda UI components are highly customizable with variants, sizes, and themes.
				</Accordion.Content>
			</Accordion.Item>
		</Accordion>
	);
}

import { Accordion } from "lambda-ui-components";
import { useState } from "react";

export default function App() {
	const [value, setValue] = useState<string | number | null>("item-1");

	return (
		<div>
			<p>Current open item: {value || "none"}</p>
			<Accordion value={value} onValueChange={setValue}>
				<Accordion.Item value="item-1">
					<Accordion.Header>Controlled Item 1</Accordion.Header>
					<Accordion.Content>This is controlled content 1.</Accordion.Content>
				</Accordion.Item>
				<Accordion.Item value="item-2">
					<Accordion.Header>Controlled Item 2</Accordion.Header>
					<Accordion.Content>This is controlled content 2.</Accordion.Content>
				</Accordion.Item>
			</Accordion>
		</div>
	);
}