When in doubt of how your component should look like and what it needs to support, start by how you would consume it. A few examples:
A dropdown which will receive a title and the content (which should be able to also receive JSX). An icon will be optional:
<Dropdown title="My title" content={<p>My content</p>} />
<Dropdown icon={<MyIcon />} title="My title" content={<p>My content</p>} />
// Now you know you need to accept an optional icon (ReactNode), a title string and the content (which is also a ReactNode)
A customizable flexible card with a lot of different variations:
<Card>
<Card.IconWrapper>
<MyIcon />
</Card.IconWrapper>
<Card.Title>My title</Card.Title>
<Card.Content>My content</Card.Content>
</Card>
<Card>
<Card.Title>My title</Card.Title>
<Card.Content>My content</Card.Content>
<Card.IconWrapper>
<MyIcon />
</Card.IconWrapper>
</Card>
<Card>
<Card.Title>My title</Card.Title>
<Card.Content>My content</Card.Content>
</Card>
// Now you know you'll need to create separate components (title, content, iconwrapper) and assign to the main card.
A sidebar that I can just pass a structured data to it:
<Sidebar
items={[
{
name: "Home",
icon: HomeIcon,
link: '/',
},
{
name: "About us",
icon: AboutUsIcon,
link: '/about-us',
},
{
name: "Terms and conditions",
icon: TermsIcon,
link: '/terms',
},
]}
/>
// Now you know you'll need an items prop, which you'll loop for each item and render the name, icon and pass the link as a href.
Instead of starting with the solution right away, a better approach may be starting by the use cases, which you will know more carefully what you need to build in order to support your needs.
SOCIAL SHARE CARD GENERATOR