Function ConversationTab

src/components/ConversationTabsView.tsx:17–55

(props: ConversationTabProps)

}

const ConversationTab = (props: ConversationTabProps) => {
  const { conversation, selected, onClick, onEdit, onDelete } = props;
  const { t } = useTranslation();

  return (
    <div
      className={`shrink-0 flex flex-row justify-center items-center cursor-pointer text-sm border pl-4 pr-2 py-1 rounded-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:bg-zinc-700 dark:border-zinc-700 ${
        selected && "!border-zinc-700 dark:!border-gray-200 shadow"
      }`}
      onClick={() => onClick(conversation)}
    >
      <span>{conversation.title}</span>
      <Dropdown
        tigger={
          <button className="w-4 h-auto shrink-0 ml-1 flex justify-center items-center text-gray-300 hover:opacity-80">
            <Icon.FiMoreVertical className="w-full h-auto" />
          </button>
        }
      >
        <div className="p-1 flex flex-col justify-start items-start bg-white dark:bg-zinc-900 shadow-lg rounded-lg">
          <DropdownItem
            className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
            onClick={() => onEdit(conversation)}
          >
            <Icon.FiEdit3 className="w-4 h-auto mr-2 opacity-70" />
            {t("common.edit")}
          </DropdownItem>
          <DropdownItem
            className="w-full p-1 px-2 flex flex-row justify-start items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800"
            onClick={() => onDelete(conversation)}
          >
            <Icon.IoTrash className="w-4 h-auto mr-2 opacity-70" />
            {t("common.delete")}
          </DropdownItem>
        </div>
      </Dropdown>
    </div>
  );
};

const ConversationTabsView = () => {
  const { t } = useTranslation();