nexo/apps/mattermost/app/components/menu_divider/index.tsx

38 lines
1.1 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTheme} from '@context/theme';
import {makeStyleSheetFromTheme} from '@utils/theme';
const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
divider: {
backgroundColor: theme.centerChannelColor,
height: 1,
opacity: 0.08,
},
}));
type Props = {
marginTop?: number;
marginBottom?: number;
marginLeft?: number;
marginRight?: number;
}
// Menu divider as per https://www.figma.com/design/ZV4NeVyUZoKfKRcRGyFJiT/Components---Mobile---Menu-Divider?node-id=1215-1535&t=qHU2DwCWm5cSbiq4-0
const MenuDivider = ({marginTop = 8, marginBottom = 8, marginLeft = 0, marginRight = 0}: Props) => {
const theme = useTheme();
const styles = getStyleSheet(theme);
const style = useMemo(() => [
styles.divider,
{marginTop, marginBottom, marginLeft, marginRight},
], [styles.divider, marginTop, marginBottom, marginLeft, marginRight]);
return (<View style={style}/>);
};
export default MenuDivider;