Blame · Panels.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ReactNode} from 'react';
b69ab31	9	import type {ColumnAlignmentProps} from './Flex';
b69ab31	10
b69ab31	11	import * as stylex from '@stylexjs/stylex';
b69ab31	12	import {Column, Row} from './Flex';
b69ab31	13	import {spacing} from './theme/tokens.stylex';
b69ab31	14
b69ab31	15	const styles = stylex.create({
b69ab31	16	tabList: {
b69ab31	17	padding: '4px',
b69ab31	18	paddingBottom: spacing.pad,
b69ab31	19	gap: '32px',
b69ab31	20	},
b69ab31	21	tab: {
b69ab31	22	color: {
b69ab31	23	default: 'var(--panel-tab-foreground)',
b69ab31	24	':hover': 'var(--panel-tab-active-foreground)',
b69ab31	25	},
b69ab31	26	padding: '4px 0',
b69ab31	27	backgroundColor: 'transparent',
b69ab31	28	border: 'none',
b69ab31	29	cursor: 'pointer',
b69ab31	30	borderBottom: '1px solid transparent',
b69ab31	31	},
b69ab31	32	activeTab: {
b69ab31	33	borderBottom: '1px solid var(--panel-tab-active-foreground)',
b69ab31	34	color: 'var(--panel-tab-active-foreground)',
b69ab31	35	},
b69ab31	36	tabpanel: {
b69ab31	37	padding: '0 6px 10px 6px',
b69ab31	38	},
b69ab31	39	spaceBetween: {
b69ab31	40	justifyContent: 'space-between',
b69ab31	41	},
b69ab31	42	});
b69ab31	43
b69ab31	44	export type PanelInfo = {render: () => ReactNode; label: ReactNode};
b69ab31	45	export function Panels<T extends string>({
b69ab31	46	panels,
b69ab31	47	xstyle,
b69ab31	48	tabXstyle,
b69ab31	49	tabListXstyle,
b69ab31	50	alignmentProps,
b69ab31	51	active,
b69ab31	52	onSelect,
b69ab31	53	tabListOptionalComponent,
b69ab31	54	}: {
b69ab31	55	panels: Record<T, PanelInfo>;
b69ab31	56	xstyle?: stylex.StyleXStyles;
b69ab31	57	tabXstyle?: stylex.StyleXStyles;
b69ab31	58	tabListXstyle?: stylex.StyleXStyles;
b69ab31	59	alignmentProps?: ColumnAlignmentProps;
b69ab31	60	active: T;
b69ab31	61	onSelect: (item: T) => void;
b69ab31	62	tabListOptionalComponent?: ReactNode;
b69ab31	63	}) {
b69ab31	64	return (
b69ab31	65	<Column xstyle={xstyle} {...(alignmentProps ?? {alignStart: true})}>
b69ab31	66	<Row xstyle={[styles.tabList, styles.spaceBetween, tabListXstyle]} role="tablist">
b69ab31	67	<Row>
b69ab31	68	{(Object.entries(panels) as Array<[T, PanelInfo]>).map(([name, value]) => {
b69ab31	69	return (
b69ab31	70	<button
b69ab31	71	role="tab"
b69ab31	72	aria-selected={active === name}
b69ab31	73	key={name}
b69ab31	74	onClick={() => onSelect(name)}
b69ab31	75	{...stylex.props(styles.tab, active === name && styles.activeTab, tabXstyle)}>
b69ab31	76	{value.label}
b69ab31	77	</button>
b69ab31	78	);
b69ab31	79	})}
b69ab31	80	</Row>
b69ab31	81	{tabListOptionalComponent}
b69ab31	82	</Row>
b69ab31	83	<div role="tabpanel" {...stylex.props(styles.tabpanel)}>
b69ab31	84	{panels[active]?.render()}
b69ab31	85	</div>
b69ab31	86	</Column>
b69ab31	87	);
b69ab31	88	}