@dcrackel/meyersquaredui/src/stories/Templates/Leaderboard/Leaderboard.stories.js

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.

import Leaderboard from './Leaderboard.vue';
import getFencersByWeapon from "../../../mocks/getFencersByWeapon.js";
export default {
    title: 'Templates/LeaderboardPage',
    component: Leaderboard,
    argTypes: {
        title: { control: 'text' },
        description: { control: 'text' },
        imageSrc: { control: 'text' },
        tournaments: { control: 'array' },
        tournamentsIsLoading: { control: 'boolean' },
    },
};

const Template = (args) => ({
    components: { Leaderboard },
    setup() {
        return { args };
    },
    template: '<Leaderboard v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
    title: 'Leaderboard',
    description: 'Track Your Progress, Outshine the Competition.',
    imageSrc: 'https://meyersquaredimages.com/images/banners/thinbanner05.webp',
    mobileImageSrc: 'https://meyersquaredimages.com/images/banners/leaderboardm.png',
    fencers: getFencersByWeapon,
    fencersIsLoading: false,
};

export const LoadingState = Template.bind({});
LoadingState.args = {
    ...Default.args,
    fencersIsLoading: true,
};

export const NoTournaments = Template.bind({});
NoTournaments.args = {
    ...Default.args,
    tournaments: [],
};