71 lines
1.3 KiB
TypeScript
71 lines
1.3 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/react';
|
||
|
|
import { TrackInfo } from './TrackInfo';
|
||
|
|
|
||
|
|
const mockTrack = {
|
||
|
|
id: '1',
|
||
|
|
title: 'Cyberpunk City',
|
||
|
|
artist: 'Synth Master',
|
||
|
|
cover: 'https://picsum.photos/200',
|
||
|
|
album: 'Neon Nights',
|
||
|
|
genre: 'Synthwave',
|
||
|
|
duration: 180,
|
||
|
|
url: 'test.mp3',
|
||
|
|
};
|
||
|
|
|
||
|
|
const meta: Meta<typeof TrackInfo> = {
|
||
|
|
title: 'Features/Player/TrackInfo',
|
||
|
|
component: TrackInfo,
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
},
|
||
|
|
tags: ['autodocs'],
|
||
|
|
};
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof TrackInfo>;
|
||
|
|
|
||
|
|
export const Default: Story = {
|
||
|
|
args: {
|
||
|
|
track: mockTrack,
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const NoCover: Story = {
|
||
|
|
args: {
|
||
|
|
track: { ...mockTrack, cover: undefined },
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const NoMetadata: Story = {
|
||
|
|
args: {
|
||
|
|
track: mockTrack,
|
||
|
|
showMetadata: false,
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Small: Story = {
|
||
|
|
args: {
|
||
|
|
track: mockTrack,
|
||
|
|
coverSize: 'sm',
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Large: Story = {
|
||
|
|
args: {
|
||
|
|
track: mockTrack,
|
||
|
|
coverSize: 'lg',
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Empty: Story = {
|
||
|
|
args: {
|
||
|
|
track: null,
|
||
|
|
className: 'w-[300px]',
|
||
|
|
},
|
||
|
|
};
|