روش بهتری برای فکر کردن در هنگام ایجاد اجزا

<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)

<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.

<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.