50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
// Copyright 2023 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React from 'react';
|
|
import type { CSSProperties } from 'react';
|
|
import { action } from '@storybook/addon-actions';
|
|
import type { Meta } from '@storybook/react';
|
|
import type { ButtonProps } from './PlaybackButton';
|
|
import { PlaybackButton } from './PlaybackButton';
|
|
|
|
export default {
|
|
title: 'components/PlaybackButton',
|
|
component: PlaybackButton,
|
|
} satisfies Meta<ButtonProps>;
|
|
|
|
const rowStyles: CSSProperties = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
padding: 10,
|
|
};
|
|
|
|
export function Default(): JSX.Element {
|
|
return (
|
|
<>
|
|
{(['message', 'draft', 'mini'] as const).map(variant => (
|
|
<>
|
|
{(['incoming', 'outgoing'] as const).map(context => (
|
|
<div
|
|
style={{
|
|
...rowStyles,
|
|
background: context === 'outgoing' ? '#2c6bed' : undefined,
|
|
}}
|
|
>
|
|
{(['play', 'download', 'pending', 'pause'] as const).map(mod => (
|
|
<PlaybackButton
|
|
key={`${variant}_${context}_${mod}`}
|
|
variant={variant}
|
|
label="playback"
|
|
onClick={action('click')}
|
|
context={context}
|
|
mod={mod}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</>
|
|
))}
|
|
</>
|
|
);
|
|
}
|