61a1f008d0
- i18next 23->26 + react-i18next 15->17 - prettier 2->3, reformat all files - replace @fontsource/inter with @fontsource-variable/inter 5, update import path - domhandler 5->6 (aligns with transitive deps) - lint-staged 16->17
28 lines
828 B
TypeScript
28 lines
828 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, as } from 'folds';
|
|
|
|
export type MediaControlProps = {
|
|
before?: ReactNode;
|
|
after?: ReactNode;
|
|
leftControl?: ReactNode;
|
|
rightControl?: ReactNode;
|
|
};
|
|
export const MediaControl = as<'div', MediaControlProps>(
|
|
({ before, after, leftControl, rightControl, children, ...props }, ref) => (
|
|
<Box grow="Yes" direction="Column" gap="300" {...props} ref={ref}>
|
|
{before && <Box direction="Column">{before}</Box>}
|
|
<Box alignItems="Center" gap="200">
|
|
<Box alignItems="Center" grow="Yes" gap="Inherit">
|
|
{leftControl}
|
|
</Box>
|
|
|
|
<Box justifyItems="End" alignItems="Center" gap="Inherit">
|
|
{rightControl}
|
|
</Box>
|
|
</Box>
|
|
{after && <Box direction="Column">{after}</Box>}
|
|
{children}
|
|
</Box>
|
|
),
|
|
);
|