2.3.7 • Published 6 months ago
@triquetra/ui v2.3.7
App.tsx
import { useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { AppLayout, IMenuNavItemsProps, ISidebarProps } from '@triquetra/ui';
import '@triquetra/ui/dist/style.css';
import AppRoutes from 'app.routes';
const menuItems: IMenuNavItemsProps = {
items: [
{
key: 'settings',
name: 'Settings',
onClick: () => {
console.log('Settings');
},
},
{
key: 'logout',
name: 'Logout',
onClick: () => {
localStorage.removeItem('token');
window.location.reload();
},
},
],
};
const App = () => {
const { pathname } = useLocation();
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const sidebarProps: ISidebarProps = useMemo(() => {
return {
links: [
{
name: 'support',
url: '',
iconProps: {
iconName: 'Ticket',
},
ariaLabel: 'support',
links: [
{
name: 'tickets',
url: `/tickets`,
iconProps: {
iconName: 'Ticket',
},
ariaLabel: 'Ticket',
},
],
},
],
pathname,
isOpen: isSidebarOpen,
setIsOpen: setIsSidebarOpen,
};
}, [pathname, isSidebarOpen, setIsSidebarOpen]);
return (
<AppLayout menuItems={menuItems} sidebarProps={sidebarProps}>
<AppRoutes />
</AppLayout>
);
};
export default App;
main.tsx
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.createRoot(document.querySelector('#root')!).render(
<BrowserRouter basename="support">
<App />
</BrowserRouter>,
);
routes.tsx
import { Text } from '@fluentui/react-components';
import { lazy, Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Route, Routes, useLocation } from 'react-router-dom';
import { IBreadcrumbCustomProps, PageLayout, Button } from '@triquetra/ui';
const breadcrumbHome: IBreadcrumbCustomProps = {
links: [{ name: 'Support Portal', url: '/' }],
};
const breadcrumbPage: IBreadcrumbCustomProps = {
links: [
{ name: 'Support Portal', url: '/' },
{ name: 'Tickets', url: '/tickets' },
],
};
const breadcrumbNotFound: IBreadcrumbCustomProps = {
links: [
{ name: 'Support Portal', url: '/' },
{ name: 'Not Found', url: '/' },
],
};
const Element = ({
children,
fallback,
}: {
children: JSX.Element;
fallback: JSX.Element;
}) => {
return (
<ErrorBoundary FallbackComponent={<span>Custom Error Component</span>}>
<Suspense fallback={fallback}>{children}</Suspense>
</ErrorBoundary>
);
};
const AppRoutes = () => {
const location = useLocation();
return (
<Routes>
<Route
path="/"
element={
<PageLayout showHeading={false} breadcrumb={breadcrumbHome}>
<Button>Check Button</Button>
</PageLayout>
}
/>
<Route
path="/tickets"
element={<PageLayout breadcrumb={breadcrumbPage}>tickets</PageLayout>}
/>
<Route
path="*"
element={
<PageLayout breadcrumb={breadcrumbNotFound}>not found</PageLayout>
}
/>
</Routes>
);
};
export default AppRoutes;
2.3.7
6 months ago
2.3.4
6 months ago
2.3.6
6 months ago
2.3.5
6 months ago
2.3.0
6 months ago
2.3.2
6 months ago
2.3.1
6 months ago
2.2.13
6 months ago
2.3.3
6 months ago
2.2.11
6 months ago
2.2.12
6 months ago
2.2.10
6 months ago
2.2.9
6 months ago
2.2.8
6 months ago
2.2.7
6 months ago
2.2.1
7 months ago
2.2.0
7 months ago
2.2.3
6 months ago
2.2.2
7 months ago
2.2.5
6 months ago
2.2.4
6 months ago
2.2.6
6 months ago
2.1.9
8 months ago
2.1.8
9 months ago
2.1.7
9 months ago
2.1.6
9 months ago
2.1.4
9 months ago
2.1.5
9 months ago
2.1.3
10 months ago
2.1.2
11 months ago
2.1.1
11 months ago
2.1.0
11 months ago
2.0.2
12 months ago
2.0.1
12 months ago
2.0.0
12 months ago
0.0.12
1 year ago
0.0.13
1 year ago
0.0.11
1 year ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago