Refactored purrlaroid further

[arthvadrr]

This is what was meant to be a commit to your previous pull request for Purrlaroid.

I further simplified the component in index.tsx so we can import Purrlaroid instead of Root and Title into CatDirectory.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
conisderate-cat-version-2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 3, 2024 4:36pm
considerate-cat-version-2-with-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 3, 2024 4:36pm

[arthvadrr]

Yes, we could conditionally render the Title. Something like:

const Purrlaroid: StoryFn = ({catImage, catName}) => (
    <PurrlaroidRoot catImage={catImage} isAnimated>
        {catName &&
            <PurrlaroidTitle catName={catName}/>
        }
    </PurrlaroidRoot>
);

catName would be optional and Title would only render if it were present. This could be done in a few different ways.

[madeleine-patience]

Yes, we could conditionally render the Title. Something like:

const Purrlaroid: StoryFn = ({catImage, catName}) => (
    <PurrlaroidRoot catImage={catImage} isAnimated>
        {catName &&
            <PurrlaroidTitle catName={catName}/>
        }
    </PurrlaroidRoot>
);

catName would be optional and Title would only render if it were present. This could be done in a few different ways.

I see, so we render the whole component as one big piece and then when we use it the conditional renders will show through if we choose to have those parts show.