revamp template

src/partials/toolbar/Toolbar.tsx

@@ -0,0 +1,11 @@
+import { IToolbarProps } from './types';
+
+const Toolbar = ({ children }: IToolbarProps) => {
+  return (
+    <div className="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
+      {children}
+    </div>
+  );
+};
+
+export { Toolbar };

src/partials/toolbar/ToolbarActions.tsx

@@ -0,0 +1,7 @@
+import { IToolbarActionsProps } from './types';
+
+const ToolbarActions = ({ children }: IToolbarActionsProps) => {
+  return <div className="flex items-center gap-2.5">{children}</div>;
+};
+
+export { ToolbarActions };

src/partials/toolbar/ToolbarDescription.tsx

@@ -0,0 +1,9 @@
+import { IToolbarDescriptionProps } from './types';
+
+const ToolbarDescription = ({ children }: IToolbarDescriptionProps) => {
+  return (
+    <div className="flex items-center gap-2 text-sm font-normal text-gray-700">{children}</div>
+  );
+};
+
+export { ToolbarDescription };

src/partials/toolbar/ToolbarHeading.tsx

@@ -0,0 +1,7 @@
+import { IToolbarHeadingProps } from './types';
+
+const ToolbarHeading = ({ children }: IToolbarHeadingProps) => {
+  return <div className="flex flex-col justify-center gap-2">{children}</div>;
+};
+
+export { ToolbarHeading };

src/partials/toolbar/ToolbarPageTitle.tsx

@@ -0,0 +1,19 @@
+import { useLocation } from 'react-router';
+
+import { useMenuCurrentItem } from '@/components/menu';
+import { useMenus } from '@/providers';
+
+import { IToolbarPageTitleProps } from './types';
+
+const ToolbarPageTitle = ({ text }: IToolbarPageTitleProps) => {
+  const { pathname } = useLocation();
+  const { getMenuConfig } = useMenus();
+  const menuConfig = getMenuConfig('primary');
+  const menuItem = useMenuCurrentItem(pathname, menuConfig);
+
+  return (
+    <h1 className="text-xl font-medium leading-none text-gray-900">{text ?? menuItem?.title}</h1>
+  );
+};
+
+export { ToolbarPageTitle };

src/partials/toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './Toolbar';
+export * from './ToolbarActions';
+export * from './ToolbarDescription';
+export * from './ToolbarHeading';
+export * from './ToolbarPageTitle';

src/partials/toolbar/types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface IToolbarProps {
+  children: ReactNode;
+}
+
+export interface IToolbarActionsProps {
+  children: ReactNode;
+}
+
+export interface IToolbarHeadingProps {
+  children: ReactNode;
+}
+
+export interface IToolbarDescriptionProps {
+  children: ReactNode;
+}
+
+export interface IToolbarPageTitleProps {
+  text?: string;
+}