@dcrackel/meyersquaredui

Version:

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

40 lines (36 loc) • 1.88 kB

JavaScript

View Raw

import TournamentDetailsBanner from './TournamentDetailsBanner.vue';
import mockTournamentDetails from '../../../../mocks/getTouranmentDetailsMock.js';

export default {
    title: 'Organisms/HeroBanners/Tournaments/TournamentDetailsBanner',
    component: TournamentDetailsBanner,
    argTypes: {
        imageSrc: { control: 'text', description: 'URL of the tournament image' },
        tournamentStartDate: { control: 'text', description: 'Start date of the tournament in YYYY-MM-DD format' },
        title: { control: 'text', description: 'Tournament name or title' },
        description: { control: 'text', description: 'Tournament description' },
        clubLogo: { control: 'text', description: 'URL of the hosting club logo' },
        hostingClubName: { control: 'text', description: 'Name of the hosting club' },
        registeredParticipants: { control: 'number', description: 'Number of registered participants' },
        eventsCount: { control: 'number', description: 'Number of events' },
        isGoing: { control: 'boolean', description: 'Status if user is going' },
        isBookmarked: { control: 'boolean', description: 'Status if tournament is bookmarked' },
    },
};

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { TournamentDetailsBanner },
    template: `<TournamentDetailsBanner v-bind="$props" />`,
});

export const Default = Template.bind({});
Default.args = {
    imageSrc: 'https://meyersquared.com/images/banners/thinbanner02.jpg',
    tournamentStartDate: '2024-07-20',
    title: mockTournamentDetails.Name,
    description: mockTournamentDetails.Description,
    clubLogo: 'https://via.placeholder.com/100',
    hostingClubName: 'Queen City Sword Guild',
    registeredParticipants: 50,
    eventsCount: 5,
    isGoing: true,
    isBookmarked: true,
};