diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx | 24 |
1 files changed, 24 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx new file mode 100644 index 0000000000..c03867d6a6 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { ListItem, ListItemProps } from '../lib/components/list-item'; +import { useHistory } from '../lib/history'; +import { RoutePath } from '../lib/routes'; + +export type NavigationListItemProps = ListItemProps & { + to: RoutePath; +}; + +export function NavigationListItem({ to, children, ...props }: NavigationListItemProps) { + const history = useHistory(); + const navigate = React.useCallback(() => history.push(to), [history, to]); + + return ( + <ListItem {...props}> + <ListItem.Item> + <ListItem.Trigger onClick={navigate}> + <ListItem.Content>{children}</ListItem.Content> + </ListItem.Trigger> + </ListItem.Item> + </ListItem> + ); +} |