@dcrackel/meyersquaredui/src/stories/Organisms/Headers/TournamentHeader/TournamentHeader.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 LeaderboardHeader from './TournamentHeader.vue';

export default {
    title: 'Organisms/Headers/TournamentHeader',
    component: LeaderboardHeader,
};

const Template = (args, { argTypes }) => ({
    components: { LeaderboardHeader },
    setup() {
        return { args };
    },
    template: `
    <LeaderboardHeader 
      v-bind="args" 
      @filter-change="onFilterChange" 
      @weapon-change="onWeaponChange" 
    />
  `,
    methods: {
        onFilterChange(filter) {
            alert(`Filter selected: ${filter}`);
        },
        onWeaponChange(weapon) {
            alert(`Weapon selected: ${weapon}`);
        },
    },
});

export const Default = Template.bind({});
Default.args = {
    filters: ['Top Ranked', 'All Time', 'Regional', 'Club Members'],
    weapons: ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler'],
};