1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { type BoxProps, Box, Reset, Text } from "@radix-ui/themes";
import { type FC, type ReactElement, use, useEffect } from "react";

import { GroupOpenContext } from "./GroupOpenContext.ts";

import css from "./Item.module.css";

export interface ItemProps extends Pick<BoxProps, "className" | "style"> {
	/**
	 * プラットフォームによってリンクなのかボタンなのか、など変わってくるため
	 * 要素を受けるようにしている。
	 */
	children: ReactElement;

	current?: boolean;
}

export const Item: FC<ItemProps> = ({ children, className = "", current, ...rest }) => {
	const ctx = use(GroupOpenContext);

	useEffect(() => {
		if (current) {
			ctx?.open();
		}
	}, [current, ctx?.open]);

	return (
		<Box
			{...rest}
			asChild
			className={`${css.item} ${className}`}
			p="2"
			aria-current={current}
		>
			<Text asChild size="2">
				<Reset>{children}</Reset>
			</Text>
		</Box>
	);
};