31efbf73b7
* extract emoji search component * extract emoji board tabs component * extract sidebar component * extract no stickers component * create emoji/sticker preview atom * extract component from emoji/sticker item and sidebar buttons * fix image group icon not loading * separate emojis and sticker groups logic * extract layout and emoji group components * add virtualization in emoji board groups * fix scroll to alignment
31 lines
716 B
TypeScript
31 lines
716 B
TypeScript
import { as, Box, Line } from 'folds';
|
|
import React, { ReactNode } from 'react';
|
|
import classNames from 'classnames';
|
|
import * as css from './styles.css';
|
|
|
|
export const EmojiBoardLayout = as<
|
|
'div',
|
|
{
|
|
header: ReactNode;
|
|
sidebar?: ReactNode;
|
|
children: ReactNode;
|
|
}
|
|
>(({ className, header, sidebar, children, ...props }, ref) => (
|
|
<Box
|
|
display="InlineFlex"
|
|
className={classNames(css.Base, className)}
|
|
direction="Row"
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Box direction="Column" grow="Yes">
|
|
<Box className={css.Header} direction="Column" shrink="No">
|
|
{header}
|
|
</Box>
|
|
{children}
|
|
</Box>
|
|
<Line size="300" direction="Vertical" />
|
|
{sidebar}
|
|
</Box>
|
|
));
|