shlink-web-client/src/settings/Settings.tsx

35 lines
1.2 KiB
TypeScript
Raw Normal View History

2023-02-18 10:40:37 +01:00
import type { FC, ReactNode } from 'react';
2023-02-18 11:11:01 +01:00
import { Navigate, Route, Routes } from 'react-router-dom';
2023-07-31 21:36:44 +02:00
import { NavPillItem, NavPills } from '../../shlink-frontend-kit/src';
import { NoMenuLayout } from '../common/NoMenuLayout';
const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
<>
{items.map((child, index) => <div key={index} className="mb-3">{child}</div>)}
</>
);
export const Settings = (
RealTimeUpdates: FC,
ShortUrlCreation: FC,
ShortUrlsList: FC,
UserInterface: FC,
Visits: FC,
Tags: FC,
) => () => (
<NoMenuLayout>
<NavPills className="mb-3">
2022-02-14 20:28:28 +01:00
<NavPillItem to="general">General</NavPillItem>
<NavPillItem to="short-urls">Short URLs</NavPillItem>
2022-03-07 11:03:41 +01:00
<NavPillItem to="other-items">Other items</NavPillItem>
</NavPills>
<Routes>
2022-03-26 12:17:42 +01:00
<Route path="general" element={<SettingsSections items={[<UserInterface />, <RealTimeUpdates />]} />} />
<Route path="short-urls" element={<SettingsSections items={[<ShortUrlCreation />, <ShortUrlsList />]} />} />
<Route path="other-items" element={<SettingsSections items={[<Tags />, <Visits />]} />} />
2022-02-14 20:28:28 +01:00
<Route path="*" element={<Navigate replace to="general" />} />
</Routes>
</NoMenuLayout>
);