79023ee190
Reviewed By: bhamodi Differential Revision: D33331422 fbshipit-source-id: 016e8dcc0c0c7f1fc353a348b54fda0d5e2ddc01
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import {Layout} from './Layout';
|
|
import {theme} from './theme';
|
|
|
|
const SandyToolbarContainer = styled(Layout.Horizontal)<{wash?: boolean}>(
|
|
({wash}) => ({
|
|
flexWrap: 'wrap',
|
|
padding: theme.space.small,
|
|
boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
|
|
background: wash ? theme.backgroundWash : undefined,
|
|
}),
|
|
);
|
|
|
|
export function Toolbar({
|
|
children,
|
|
style,
|
|
wash,
|
|
right,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
position?: 'bottom' | 'top';
|
|
compact?: boolean;
|
|
wash?: boolean;
|
|
style?: React.CSSProperties;
|
|
/**
|
|
* Additional children that are always right-aligned
|
|
*/
|
|
right?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<SandyToolbarContainer
|
|
style={style}
|
|
gap={theme.space.small}
|
|
center
|
|
wash={wash}>
|
|
{children}
|
|
{right ? (
|
|
<>
|
|
<div style={{flexGrow: 1}}></div>
|
|
{right}
|
|
</>
|
|
) : null}
|
|
</SandyToolbarContainer>
|
|
);
|
|
}
|