@dcrackel/meyersquaredui/src/stories/Organisms/Cards/FencerPoolStatsCards/FencerPoolStatsCard.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 FencerPoolStatsCard from './FencerPoolStatsCard.vue';

export default {
    title: 'Organisms/Cards/FencerPoolStatsCard',
    component: FencerPoolStatsCard,
    argTypes: {
        data: {
            description: 'The fencer data to be displayed, including name, club, portrait, and stats.',
            control: 'object',
        },
    },
};

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

export const Default = Template.bind({});
Default.args = {
    data: {
        Name: 'Fencer Name',
        Club: 'Cat\'s Cutlass',
        Portrait: 'https://randomuser.me/api/portraits/men/22.jpg',
        WP: '75%',
        Wins: 3,
        Losses: 1,
        HS: 33,
        HR: 22,
        IND: 9,
    },
};

export const AnotherFencer = Template.bind({});
AnotherFencer.args = {
    data: {
        Name: 'Fencer Name 2',
        Club: 'Whale\'n Tale',
        Portrait: 'https://randomuser.me/api/portraits/women/9.jpg',
        WP: '50%',
        Wins: 2,
        Losses: 2,
        HS: 28,
        HR: 26,
        IND: 2,
    },
};