mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 15:00:30 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add arrow to message bubbles and improve spacing

Browse source
This commit is contained in:
Ajay Bura 2025-08-31 08:18:10 +05:30
parent 90ca8ca2c5
commit 01d57deea1
4 changed files with 72 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/app/components/message/layout/Bubble.tsx
View file

@ -1,18 +1,35 @@
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import { Box, as } from 'folds';
import * as css from './layout.css';
type BubbleLayoutProps = {
self?: boolean;
before?: ReactNode;
};
export const BubbleLayout = as<'div', BubbleLayoutProps>(({ before, children, ...props }, ref) => (
<Box gap="300" {...props} ref={ref}>
<Box className={css.BubbleBefore} shrink="No">
{before}
export const BubbleLayout = as<'div', BubbleLayoutProps>(
({ self, before, children, ...props }, ref) => (
<Box direction={self ? 'RowReverse' : 'Row'} gap="300" {...props} ref={ref}>
<Box className={css.BubbleBefore} shrink="No">
{before}
</Box>
<Box
className={classNames(
css.BubbleContent,
css.BubbleContentArrow,
self
? {
[css.BubbleContentArrowRight]: !!before,
}
: {
[css.BubbleContentArrowLeft]: !!before,
}
)}
direction="Column"
>
{children}
</Box>
</Box>
<Box className={css.BubbleContent} direction="Column">
{children}
</Box>
</Box>
));
)
);