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';
|
2021-12-30 10:02:31 +01:00
|
|
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
2020-04-18 20:31:20 +02:00
|
|
|
|
2022-02-13 20:20:20 +01:00
|
|
|
const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
|
2021-03-06 16:54:43 +01:00
|
|
|
<>
|
2022-02-13 20:20:20 +01:00
|
|
|
{items.map((child, index) => <div key={index} className="mb-3">{child}</div>)}
|
2021-03-06 16:54:43 +01:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2022-05-28 11:16:59 +02:00
|
|
|
export const Settings = (
|
2021-12-24 14:15:28 +01:00
|
|
|
RealTimeUpdates: FC,
|
|
|
|
ShortUrlCreation: FC,
|
|
|
|
ShortUrlsList: FC,
|
|
|
|
UserInterface: FC,
|
|
|
|
Visits: FC,
|
|
|
|
Tags: FC,
|
|
|
|
) => () => (
|
2020-04-25 09:49:54 +02:00
|
|
|
<NoMenuLayout>
|
2022-03-05 16:08:30 +01:00
|
|
|
<NavPills className="mb-3">
|
2022-02-14 20:28:28 +01:00
|
|
|
<NavPillItem to="general">General</NavPillItem>
|
2022-02-14 19:58:20 +01:00
|
|
|
<NavPillItem to="short-urls">Short URLs</NavPillItem>
|
2022-03-07 11:03:41 +01:00
|
|
|
<NavPillItem to="other-items">Other items</NavPillItem>
|
2022-02-14 19:58:20 +01:00
|
|
|
</NavPills>
|
2022-02-13 20:20:20 +01:00
|
|
|
|
|
|
|
<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" />} />
|
2022-02-13 20:20:20 +01:00
|
|
|
</Routes>
|
2020-04-25 09:49:54 +02:00
|
|
|
</NoMenuLayout>
|
|
|
|
);
|