feat: add admin page navigation

Jozwiaczek · Mar 26, 2021 · db49302 · db49302
1 parent 1bcb4dc
commit db49302
Show file tree

Hide file tree

Showing 27 changed files with 343 additions and 29 deletions.
diff --git a/packages/client/_templates/element/new/element.ejs.t b/packages/client/_templates/element/new/element.ejs.t
@@ -3,6 +3,7 @@ to: src/elements/<%= h.changeCase.pascal(Name) %>/index.tsx
 ---
 import React from 'react';
 import { Wrapper } from './<%= h.changeCase.pascal(Name) %>.styled';
+import { <%= h.changeCase.pascal(Name) %>Props } from './<%= h.changeCase.pascal(Name) %>.types';
 
 const <%= h.changeCase.pascal(Name) %> = ({ children }: <%= h.changeCase.pascal(Name) %>Props) => <Wrapper data-testid="<%= h.changeCase.camel(Name) %>">{children}</Wrapper>;
 

diff --git a/packages/client/_templates/element/new/element_stories.ejs.t b/packages/client/_templates/element/new/element_stories.ejs.t
@@ -4,6 +4,7 @@ to: "<%= isStories ? `src/elements/${h.changeCase.pascal(Name)}/${h.changeCase.p
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import <%= h.changeCase.pascal(Name) %> from '.';
+import { <%= h.changeCase.pascal(Name) %>Props } from './<%= h.changeCase.pascal(Name) %>.types';
 
 export default {
   title: 'Elements/<%= h.changeCase.pascal(Name) %>',

diff --git a/packages/client/src/elements/AppBar/AppBar.styled.ts b/packages/client/src/elements/AppBar/AppBar.styled.ts
@@ -39,3 +39,12 @@ export const TabPageWrapper = styled.div<{ orientation?: TabsOrientation }>`
       margin-left: 160px;
   `};
 `;
+
+export const AppBarPageWrapper = styled.div(
+  ({ theme: { breakpoints, down } }) => `
+  padding: 60px;
+  ${down(breakpoints.md)} {
+    padding: 60px 20px;
+  }
+`,
+);
diff --git a/packages/client/src/elements/AppBar/index.tsx b/packages/client/src/elements/AppBar/index.tsx
@@ -4,10 +4,11 @@ import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
 import { routes } from '../../constants';
 import { useCurrentUser, useMediaDevice } from '../../hooks';
 import { AdminIcon, DashboardIcon, HistoryIcon, SettingsIcon } from '../../icons';
-import { Dashboard } from '../../pages';
+import { Admin, Dashboard } from '../../pages';
+import { BackgroundSideLogo } from '../index';
 import TabbedLayout from '../layouts/TabbedLayout';
 import { hasAccess } from '../layouts/TabbedLayout/Tabs/Tabs.utils';
-import { TabPageWrapper, TabsWrapper, Wrapper } from './AppBar.styled';
+import { AppBarPageWrapper, TabPageWrapper, TabsWrapper, Wrapper } from './AppBar.styled';
 import { AppBarItem, AppBarProps } from './AppBar.types';
 
 const defaultTabs: Array<AppBarItem> = [
@@ -34,7 +35,7 @@ const defaultTabs: Array<AppBarItem> = [
     label: 'menu.admin',
     icon: <AdminIcon />,
     onlyAdmin: false,
-    component: <p>admin</p>,
+    component: <Admin />,
   },
   {
     index: 3,
@@ -107,7 +108,10 @@ const AppBar = ({ tabs = defaultTabs }: AppBarProps) => {
               path={path}
               render={() => (
                 <TabbedLayout.TabPanel value={activeTab} index={index} {...rest}>
-                  {component}
+                  <AppBarPageWrapper>
+                    <BackgroundSideLogo />
+                    {component}
+                  </AppBarPageWrapper>
                 </TabbedLayout.TabPanel>
               )}
             />

diff --git a/packages/client/src/elements/buttons/Button/Button.stories.tsx b/packages/client/src/elements/buttons/Button/Button.stories.tsx
@@ -14,6 +14,21 @@ const Template: Story<ButtonProps> = (args) => <Button {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   children: <>Lorem Ipsum</>,
-  withArrow: true,
-  disabled: false,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  children: <>Lorem Ipsum</>,
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: <>Lorem Ipsum</>,
+  disabled: true,
+};
+
+export const WithTranslationLabel = Template.bind({});
+WithTranslationLabel.args = {
+  label: 'routes.login.login',
 };
diff --git a/packages/client/src/elements/buttons/Button/Button.styled.ts b/packages/client/src/elements/buttons/Button/Button.styled.ts
@@ -27,12 +27,17 @@ const getFontColor = ({
   }
 };
 
-const getBaseColor = ({ colorVariant, palette: { colors, primary } }: HelperStyledFunction) => {
+const getBaseColor = ({
+  colorVariant,
+  palette: { colors, primary, background },
+}: HelperStyledFunction) => {
   switch (colorVariant) {
     case 'blue':
       return colors.blue;
     case 'red':
       return colors.red;
+    case 'card':
+      return background.paper;
     case ThemeType.dark:
       return primary.dark;
     case ThemeType.light:
@@ -46,6 +51,7 @@ export const StyledButton = styled.button<ButtonProps>(
   ({ colorVariant, fullWidth, margin, theme: { palette, sizes } }) => `
   position: relative;
   overflow: hidden;
+  
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/packages/client/src/elements/buttons/Button/Button.types.d.ts b/packages/client/src/elements/buttons/Button/Button.types.d.ts
@@ -2,9 +2,10 @@ import { ButtonHTMLAttributes } from 'react';
 
 import { ITheme, ThemeType } from '../../../theme/Theme';
 
-type ButtonColorVariant = ThemeType | 'red' | 'blue';
+type ButtonColorVariant = ThemeType | 'red' | 'blue' | 'card';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string;
   loading?: boolean;
   colorVariant?: ButtonColorVariant;
   fullWidth?: boolean;

diff --git a/packages/client/src/elements/buttons/Button/index.tsx b/packages/client/src/elements/buttons/Button/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ArrowIcon } from '../../../icons';
 import { ThemeType } from '../../../theme/Theme';
@@ -12,12 +13,15 @@ const Button = ({
   children,
   colorVariant = ThemeType.light,
   loading,
+  label,
   to,
   disabled,
   withArrow,
   fullWidth,
   ...rest
 }: ButtonProps) => {
+  const { t } = useTranslation();
+
   const baseButton = (
     <StyledButton
       data-testid="button"
@@ -27,7 +31,7 @@ const Button = ({
       {...rest}
     >
       {loading && <Spinner margin="0 8px 0 0" />}
-      {children}
+      {t(label as never) || children}
       {withArrow && (
         <IconContainer>
           <ArrowIcon />

diff --git a/packages/client/src/elements/buttons/IconButton/IconButton.styled.ts b/packages/client/src/elements/buttons/IconButton/IconButton.styled.ts
@@ -3,8 +3,9 @@ import styled from 'styled-components';
 import { getCssColor } from '../../../utils';
 import hexToRgba from '../../../utils/hexToRgba';
 import { RippleContainer } from '../../animations/RippleEffect/RippleEffect.styled';
+import { StyledButtonProps } from './IconButton.types';
 
-export const StyledButton = styled.button<{ color: string }>(
+export const StyledButton = styled.button<StyledButtonProps>(
   ({ color, theme }) => `
   position: relative;
   overflow: hidden;

diff --git a/packages/client/src/elements/buttons/IconButton/IconButton.types.d.ts b/packages/client/src/elements/buttons/IconButton/IconButton.types.d.ts
@@ -3,3 +3,7 @@ import { ButtonHTMLAttributes } from 'react';
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   to?: string;
 }
+
+interface StyledButtonProps {
+  color: string;
+}
diff --git a/packages/client/src/elements/index.ts b/packages/client/src/elements/index.ts
@@ -7,7 +7,6 @@ export {
   RippleEffect,
   Spinner,
 } from './animations';
-export { default as AppBar } from './AppBar';
 export { default as BackgroundSideLogo } from './BackgroundSideLogo';
 export { Button, IconButton } from './buttons';
 export { default as Card } from './Card';

diff --git a/packages/client/src/elements/layouts/CardLayout/CardLayout.styled.ts b/packages/client/src/elements/layouts/CardLayout/CardLayout.styled.ts
@@ -36,14 +36,9 @@ export const CardWrapper = styled.div`
   justify-content: center;
 `;
 
-export const StyledTitle = styled.h1(
-  ({ theme: { breakpoints, down } }) => `
+export const StyledTitle = styled.h1`
   margin: 30px 0 20px;
-  ${down(breakpoints.xs)} {
-    font-size: 40px;
-  }
-`,
-);
+`;
 
 export const StyledDescription = styled.p`
   color: ${({ theme: { palette } }) => palette.text.secondary};

diff --git a/packages/client/src/i18n/resources/en.ts b/packages/client/src/i18n/resources/en.ts
@@ -39,6 +39,16 @@ const en = {
         logout: 'Logout',
         logoutFromAllDevices: 'Logout from all devices',
       },
+      admin: {
+        title: 'Admin panel',
+        items: {
+          device: 'Device configuration',
+          users: 'Users management',
+          invitations: 'Invitations',
+          privileges: 'Privileges groups',
+          statistics: 'Statistics',
+        },
+      },
       login: {
         keepMeLoggedIn: 'Keep me logged in',
         forgotPassword: 'Forgot password',

diff --git a/packages/client/src/i18n/resources/pl.ts b/packages/client/src/i18n/resources/pl.ts
@@ -11,7 +11,7 @@ const pl: TranslationStructure = {
       history: 'Historia',
       dashboard: 'Pulpit',
       settings: 'Ustawienia',
-      admin: 'Zarządzanie',
+      admin: 'Admin',
     },
     form: {
       errors: {
@@ -41,6 +41,16 @@ const pl: TranslationStructure = {
         logout: 'Wyloguj się',
         logoutFromAllDevices: 'Wyloguj ze wszystkich urządzeń',
       },
+      admin: {
+        title: 'Admin panel',
+        items: {
+          device: 'Urządzenie',
+          users: 'Użytkownicy',
+          invitations: 'Zaproszenia',
+          privileges: 'Grupy dostępu',
+          statistics: 'Statystyki',
+        },
+      },
       login: {
         keepMeLoggedIn: 'Nie wylogowuj mnie',
         forgotPassword: 'Zapomniałem hasła',

diff --git a/packages/client/src/icons/AdminIcon.tsx b/packages/client/src/icons/AdminIcon.tsx
@@ -2,23 +2,18 @@ import React, { forwardRef, memo, Ref, SVGProps } from 'react';
 
 const AdminIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
   <svg
-    width="26"
-    height="26"
-    viewBox="0 0 28 28"
+    width="33"
+    height="28"
+    viewBox="0 0 26 23"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     ref={svgRef}
     {...props}
   >
     <path
-      d="M18.6957 12.9565C20.1357 12.9565 21.2939 11.7878 21.2939 10.3478C21.2939 8.90781 20.1357 7.73912 18.6957 7.73912C17.2557 7.73912 16.087 8.90781 16.087 10.3478C16.087 11.7878 17.2557 12.9565 18.6957 12.9565ZM10.8696 11.913C12.6017 11.913 13.9896 10.5148 13.9896 8.7826C13.9896 7.05042 12.6017 5.65216 10.8696 5.65216C9.13739 5.65216 7.73913 7.05042 7.73913 8.7826C7.73913 10.5148 9.13739 11.913 10.8696 11.913ZM18.6957 15.0435C16.7861 15.0435 12.9565 16.0035 12.9565 17.913V20.2609H24.4348V17.913C24.4348 16.0035 20.6052 15.0435 18.6957 15.0435ZM10.8696 14C8.43826 14 3.56522 15.2209 3.56522 17.6522V20.2609H10.8696V17.913C10.8696 17.0261 11.2139 15.4713 13.3426 14.2922C12.4348 14.1044 11.5583 14 10.8696 14Z"
+      d="M9.97066 0C8.64846 0 7.38043 0.532637 6.4455 1.48074C5.51057 2.42884 4.98533 3.71474 4.98533 5.05556C4.98533 6.39637 5.51057 7.68227 6.4455 8.63037C7.38043 9.57847 8.64846 10.1111 9.97066 10.1111C11.2928 10.1111 12.5609 9.57847 13.4958 8.63037C14.4307 7.68227 14.956 6.39637 14.956 5.05556C14.956 3.71474 14.4307 2.42884 13.4958 1.48074C12.5609 0.532637 11.2928 0 9.97066 0ZM18.695 10.1111C18.533 10.1111 18.3959 10.2249 18.3709 10.3765L18.1341 12.0449C17.7602 12.2092 17.3988 12.4114 17.0747 12.6389L15.5293 12.0069C15.3922 12.0069 15.2302 12.0069 15.1429 12.1712L13.8966 14.3578C13.8218 14.4968 13.8467 14.6611 13.9714 14.7622L15.2925 15.7986C15.2676 16.0135 15.2551 16.2157 15.2551 16.4306C15.2551 16.6454 15.2676 16.8476 15.2925 17.0625L13.9714 18.0989C13.8592 18.2 13.8218 18.3643 13.8966 18.5033L15.1429 20.6899C15.2177 20.8542 15.3797 20.8542 15.5293 20.8542L17.0747 20.2222C17.3988 20.4497 17.7478 20.6646 18.1341 20.8162L18.3709 22.4846C18.3959 22.6363 18.5205 22.75 18.695 22.75H21.1876C21.3247 22.75 21.4618 22.6363 21.4868 22.4846L21.7236 20.8162C22.0975 20.6519 22.434 20.4497 22.7705 20.2222L24.3035 20.8542C24.4655 20.8542 24.6275 20.8542 24.7148 20.6899L25.9611 18.5033C26.0359 18.3643 25.9985 18.2 25.8863 18.0989L24.5527 17.0625C24.5777 16.8476 24.6026 16.6454 24.6026 16.4306C24.6026 16.2157 24.5901 16.0135 24.5527 15.7986L25.8739 14.7622C25.986 14.6611 26.0234 14.4968 25.9486 14.3578L24.7023 12.1712C24.6275 12.0069 24.4655 12.0069 24.3035 12.0069L22.7705 12.6389C22.434 12.4114 22.0975 12.1965 21.7111 12.0449L21.4743 10.3765C21.4618 10.2249 21.3247 10.1111 21.1876 10.1111H18.695ZM9.97066 12.6389C4.46187 12.6389 0 14.9012 0 17.6944V20.2222H12.0645C11.5083 19.0377 11.2188 17.7425 11.217 16.4306C11.2195 15.1607 11.4916 13.9064 12.0146 12.7526C11.3541 12.6768 10.6686 12.6389 9.97066 12.6389ZM19.9413 14.5347C20.9758 14.5347 21.8108 15.3815 21.8108 16.4306C21.8108 17.4796 20.9758 18.3264 19.9413 18.3264C18.8944 18.3264 18.0718 17.4796 18.0718 16.4306C18.0718 15.3815 18.9069 14.5347 19.9413 14.5347Z"
       fill="currentColor"
     />
-    <path
-      d="M14 26C20.6274 26 26 20.6274 26 14C26 7.37258 20.6274 2 14 2C7.37258 2 2 7.37258 2 14C2 20.6274 7.37258 26 14 26Z"
-      stroke="currentColor"
-      strokeWidth="3"
-    />
   </svg>
 );
 

diff --git a/packages/client/src/icons/DeviceIcon.tsx b/packages/client/src/icons/DeviceIcon.tsx
@@ -0,0 +1,30 @@
+import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+
+const DeviceIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    viewBox="0 0 21 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={svgRef}
+    {...props}
+  >
+    <rect
+      x="3.73914"
+      y="3.73914"
+      width="13.5217"
+      height="13.5217"
+      rx="2"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.21739 2.73913H8.21739V0H7.21739V2.73913ZM9.95652 2.73913H10.9565V0H9.95652V2.73913ZM12.6957 2.73913H13.6957V0H12.6957V2.73913ZM15.4348 2.74409C15.7879 2.76427 16.1247 2.84555 16.4348 2.97751V0H15.4348V2.74409ZM17.9838 4.47826C18.1269 4.78678 18.2191 5.12371 18.2497 5.47826H21V4.47826H17.9838ZM18.2609 7.21739V8.21739H21V7.21739H18.2609ZM18.2609 9.95652V10.9565H21V9.95652H18.2609ZM18.2609 12.6957V13.6957H21V12.6957H18.2609ZM18.2559 15.4348C18.2357 15.7879 18.1545 16.1247 18.0225 16.4348H21V15.4348H18.2559ZM16.4348 18.0225C16.1247 18.1545 15.7879 18.2357 15.4348 18.2559V21H16.4348V18.0225ZM13.6957 18.2609H12.6957V21H13.6957V18.2609ZM10.9565 18.2609H9.95652V21H10.9565V18.2609ZM8.21739 18.2609H7.21739V21H8.21739V18.2609ZM5.47826 18.2497C5.12371 18.2191 4.78678 18.1269 4.47826 17.9838V21H5.47826V18.2497ZM2.97751 16.4348C2.84555 16.1247 2.76427 15.7879 2.74409 15.4348H0V16.4348H2.97751ZM2.73913 13.6957V12.6957H0V13.6957H2.73913ZM2.73913 10.9565V9.95652H0V10.9565H2.73913ZM2.73913 8.21739V7.21739H0V8.21739H2.73913ZM2.75032 5.47826C2.78086 5.12371 2.87307 4.78678 3.01617 4.47826H0V5.47826H2.75032ZM5.47826 0V2.75032C5.12371 2.78086 4.78678 2.87307 4.47826 3.01617V0H5.47826Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default memo(forwardRef(DeviceIcon));
diff --git a/packages/client/src/icons/InvitationIcon.tsx b/packages/client/src/icons/InvitationIcon.tsx
@@ -0,0 +1,17 @@
+import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+
+const InvitationIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    viewBox="0 0 21 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={svgRef}
+    {...props}
+  >
+    <rect x="1" y="1" width="19" height="12.875" rx="2" stroke="currentColor" />
+    <path d="M19.6875 1.75L10.3214 9.625L1.3125 1.75" stroke="currentColor" strokeWidth="2" />
+  </svg>
+);
+
+export default memo(forwardRef(InvitationIcon));
diff --git a/packages/client/src/icons/PrivilegesGroupIcon.tsx b/packages/client/src/icons/PrivilegesGroupIcon.tsx
@@ -0,0 +1,26 @@
+import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+
+const PrivilegesGroupIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={svgRef}
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M11.9683 1.2949C11.1392 0.465788 10.0146 0 8.8421 0C7.66957 0 6.54506 0.465788 5.71595 1.2949C4.88684 2.124 4.42105 3.24852 4.42105 4.42105C4.42105 5.59359 4.88684 6.7181 5.71595 7.54721C6.54506 8.37632 7.66957 8.8421 8.8421 8.8421C10.0146 8.8421 11.1392 8.37632 11.9683 7.54721C12.7974 6.7181 13.2632 5.59359 13.2632 4.42105C13.2632 3.24852 12.7974 2.124 11.9683 1.2949ZM15.456 12.5386C13.8366 11.6269 11.4741 11.0526 8.8421 11.0526C3.95684 11.0526 0 13.0311 0 15.4737V17.6842H13.6354C13.3967 17.1817 13.2632 16.6196 13.2632 16.0263C13.2632 14.4901 14.1586 13.1631 15.456 12.5386Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.5885 13.2604C19.9802 13.6617 21 14.9664 21 16.5139C21 18.3811 19.5155 19.8947 17.6842 19.8947C15.8529 19.8947 14.3684 18.3811 14.3684 16.5139C14.3684 14.9664 15.3882 13.6617 16.7799 13.2604V7.06305C16.7799 6.26769 17.3725 5.61345 18.1321 5.53435C18.1705 5.52905 18.2096 5.52632 18.2494 5.52632H19.3044C19.783 5.52632 20.171 5.92193 20.171 6.40994C20.171 6.89795 19.783 7.29356 19.3044 7.29356H18.5885V9.13764H19.3044C19.783 9.13764 20.171 9.53325 20.171 10.0213C20.171 10.5093 19.783 10.9049 19.3044 10.9049H18.5885V13.2604ZM17.6842 18.1275C18.5582 18.1275 19.2667 17.4051 19.2667 16.5139C19.2667 15.6228 18.5582 14.9004 17.6842 14.9004C16.8102 14.9004 16.1017 15.6228 16.1017 16.5139C16.1017 17.4051 16.8102 18.1275 17.6842 18.1275Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default memo(forwardRef(PrivilegesGroupIcon));
diff --git a/packages/client/src/icons/StatisticsIcon.tsx b/packages/client/src/icons/StatisticsIcon.tsx
@@ -0,0 +1,20 @@
+import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+
+const StatisticsIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    viewBox="0 0 21 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={svgRef}
+    {...props}
+  >
+    <path
+      d="M0 14.6249C4.2 14.6249 1.575 1.49989 5.25 1.49994C8.925 1.49999 7.35 9.37494 10.5 9.37494C13.65 9.37494 13.7246 4.64994 16.8 4.64994C18.9 4.64994 17.85 12.5249 21 12.5249"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
+export default memo(forwardRef(StatisticsIcon));
diff --git a/packages/client/src/icons/UsersIcon.tsx b/packages/client/src/icons/UsersIcon.tsx
@@ -0,0 +1,19 @@
+import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+
+const UsersIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGSVGElement>) => (
+  <svg
+    width="100%"
+    viewBox="0 0 21 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={svgRef}
+    {...props}
+  >
+    <path
+      d="M15.225 7.35C16.674 7.35 17.8395 6.174 17.8395 4.725C17.8395 3.276 16.674 2.1 15.225 2.1C13.776 2.1 12.6 3.276 12.6 4.725C12.6 6.174 13.776 7.35 15.225 7.35ZM7.35 6.3C9.093 6.3 10.4895 4.893 10.4895 3.15C10.4895 1.407 9.093 0 7.35 0C5.607 0 4.2 1.407 4.2 3.15C4.2 4.893 5.607 6.3 7.35 6.3ZM15.225 9.45C13.3035 9.45 9.45 10.416 9.45 12.3375V14.7H21V12.3375C21 10.416 17.1465 9.45 15.225 9.45ZM7.35 8.4C4.9035 8.4 0 9.6285 0 12.075V14.7H7.35V12.3375C7.35 11.445 7.69649 9.88053 9.83849 8.69403C8.92499 8.50503 8.043 8.4 7.35 8.4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default memo(forwardRef(UsersIcon));