Pour diviser ce code en composants réutilisables avec React et TypeScript, vous pouvez suivre ces étapes:

1. **Créez un composant pour le lien de navigation**: Créez un composant qui représente le lien de navigation avec son icône, texte et flèche. Ce composant prendra des propriétés pour personnaliser ces éléments. Par exemple:

import React from 'react';

interface NavItemProps {
  icon: JSX.Element;
  text: string;
  submenuId: string;
}

const NavItem: React.FC<NavItemProps> = ({ icon, text, submenuId }) => {
  return (
    <li className="nav-item has-submenu my-1">
      <a
        className="nav-link submenu-toggle"
        href="#"
        data-bs-toggle="collapse"
        data-bs-target={`#${submenuId}`}
        aria-expanded="false"
        aria-controls={submenuId}
      >
        <span className="nav-icon">{icon}</span>
        <span className="nav-link-text">{text}</span>
        <span className="submenu-arrow">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 16 16"
            className="bi bi-chevron-down"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
            />
          </svg>
        </span>
      </a>
    </li>
  );
};

export default NavItem;

2. **Créez un composant pour le sous-menu**: Créez un composant qui représente le sous-menu. Ce composant prendra en charge la liste des éléments de menu. Par exemple:

import React, { ReactNode } from 'react';

interface SubmenuProps {
  id: string;
  children: ReactNode;
}

const Submenu: React.FC<SubmenuProps> = ({ id, children }) => {
  return (
    <div id={id} className="collapse submenu submenu-1" data-bs-parent="#menu-accordion">
      <ul className="submenu-list list-unstyled">{children}</ul>
    </div>
  );
};

export default Submenu;

3. **Créez un composant pour un élément de menu**: Créez un composant qui représente un élément de menu individuel. Vous pouvez personnaliser cet élément en fonction de vos besoins. Par exemple:

import React from 'react';

interface MenuItemProps {
  href: string;
  text: string;
}

const MenuItem: React.FC<MenuItemProps> = ({ href, text }) => {
  return (
    <li className="submenu-item">
      <a className="submenu-link" href={href}>
        {text}
      </a>
    </li>
  );
};

export default MenuItem;

4. **Utilisez ces composants dans votre application**: Maintenant, vous pouvez utiliser ces composants dans votre application pour créer des éléments de menu de manière réutilisable. Par exemple:

import React from 'react';
import NavItem from './NavItem';
import Submenu from './Submenu';
import MenuItem from './MenuItem';

const App: React.FC = () => {
  return (
    <ul id="menu-accordion">
      <NavItem icon={<YourIconComponent />} text="Gestion Clients" submenuId="submenu-1" />
      <Submenu id="submenu-1">
        <MenuItem href="manageClients/activeClient.html" text="Clients Actifs" />
        <MenuItem href="manageClients/bannedClient.html" text="Clienst Bannis" />
        <MenuItem href="manageClients/allClient.html" text="Tous Les Clients" />
        <MenuItem href="#" text="Avis à Tous" />
      </Submenu>
    </ul>
  );
};

export default App;

Assurez-vous d'importer correctement les composants et de personnaliser les icônes et les liens selon vos besoins. Cette approche rend votre code plus modulaire et réutilisable.