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

export default {
    title: 'Organisms/Cards/Tournament/TournamentDetails',
    component: TournamentDetails,
    argTypes: {
        imageSrc: { control: 'text', description: 'URL of the tournament image' },
        description: { control: 'text', description: 'HTML description of the tournament' },
    },
};

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

export const Default = Template.bind({});
Default.args = {
    imageSrc: 'https://via.placeholder.com/800x500',
    description: `
    <h2>Welcome to the Tournament!</h2>
    <p>This is a sample description of the tournament. It can contain HTML elements like <strong>bold</strong>, <em>italic</em>, and even <a href="#">links</a>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subheac is the text that can go up to 500 characters or more.</p>
  `,
};

export const WithCustomImage = Template.bind({});
WithCustomImage.args = {
    imageSrc: 'https://www.meyersquaredimages.com/images/tournaments/tournament1.jpg',
    description: `
    <h2>Special Event Details</h2>
    <p>This tournament has a custom image and a unique description. Feel free to add more information here.</p>
  `,
};