diff --git a/web/app-list/app-list-item.css b/web/app-list/app-list-item.css new file mode 100644 index 000000000..e2db5241c --- /dev/null +++ b/web/app-list/app-list-item.css @@ -0,0 +1,17 @@ +.container { + display: flex; + flex-direction: row; + align-items: center; + column-gap: 8px; + color: var(--text-background-tertiary-default); + font-size: var(--s-font-14); +} + +.container:hover { + cursor: pointer; +} + +.container:hover, +.selected { + color: var(--text-background-primary-default); +} diff --git a/web/app-list/app-list-item.react.js b/web/app-list/app-list-item.react.js new file mode 100644 index 000000000..4cdb67477 --- /dev/null +++ b/web/app-list/app-list-item.react.js @@ -0,0 +1,39 @@ +// @flow + +import classNames from 'classnames'; +import * as React from 'react'; + +import SWMansionIcon, { + type Icon, +} from 'lib/components/SWMansionIcon.react.js'; + +import css from './app-list-item.css'; +import { useSelector } from '../redux/redux-utils.js'; +import { navTabSelector } from '../selectors/nav-selectors.js'; +import type { NavigationTab } from '../types/nav-types.js'; + +type Props = { + +id: NavigationTab, + +name: string, + +icon: Icon, + +onClick: () => mixed, +}; + +function AppListItem(props: Props): React.Node { + const { id, name, icon, onClick } = props; + + const currentSelectedApp = useSelector(navTabSelector); + + const className = classNames(css.container, { + [css.selected]: currentSelectedApp === id, + }); + + return ( +
+ +
{name}
+
+ ); +} + +export default AppListItem;