feat: add action center

src/apps/actionCenter/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import { useBoolean } from "@fluentui/react-hooks";
-import { useTransition, animated, useTrail } from "react-spring";
+import { useTransition, animated } from "react-spring";
 import { shallowEqual, useSelector } from "react-redux";
 
 import Notifications from "./notifications";
@@ -18,12 +18,12 @@ const Wrapper = styled(animated.div)`
 interface IProps {}
 
 const ActionCenter = ({}: IProps) => {
-  const quickActionProps = useSelector(
-    (state) => state.base.quickActions,
+  const actionCenterProps = useSelector(
+    (state) => state.actionCenter,
     shallowEqual
   );
   const [showNotification, { setFalse }] = useBoolean(
-    quickActionProps.notifications.length > 0
+    actionCenterProps.notifications.length > 0
   );
 
   const notificationTranstion = useTransition(showNotification, {
@@ -39,7 +39,7 @@ const ActionCenter = ({}: IProps) => {
     delay: 0,
   });
 
-  const transition = useTrail(2, {
+  const transition = useTransition(actionCenterProps.show, {
     from: {
       opacity: 0,
       y: 500,
@@ -54,26 +54,29 @@ const ActionCenter = ({}: IProps) => {
     },
   });
 
-  if (!quickActionProps.show) {
+  if (!actionCenterProps.show) {
     return null;
   }
 
-  return transition.map((style, index) => (
-    <Wrapper style={style}>
-      {notificationTranstion(
-        (notificationStyle, notificationItem) =>
-          notificationItem && (
-            <animated.div style={notificationStyle}>
-              <Notifications
-                items={quickActionProps.notifications}
-                hideNotifications={setFalse}
-              />
-            </animated.div>
-          )
-      )}
-      <QuickSettings />
-    </Wrapper>
-  ));
+  return transition(
+    (style, item) =>
+      item && (
+        <Wrapper style={style}>
+          {notificationTranstion(
+            (notificationStyle, notificationItem) =>
+              notificationItem && (
+                <animated.div style={notificationStyle}>
+                  <Notifications
+                    items={actionCenterProps.notifications}
+                    hideNotifications={setFalse}
+                  />
+                </animated.div>
+              )
+          )}
+          <QuickSettings />
+        </Wrapper>
+      )
+  );
 };
 
 export default React.memo(ActionCenter);

src/apps/actionCenter/interface.ts

@@ -1,6 +1,15 @@
 export interface INotification {
   title: string;
-  desciption: string;
+  description: string;
   date: number;
   id: number;
 }
+
+export type ButtonType = "NESTED" | "WITH_OPTIONS";
+export interface IButtonAction {
+  type?: ButtonType;
+  label: string;
+  icon: string;
+  id: string;
+  selected: boolean;
+}

src/apps/actionCenter/notifications/index.tsx

@@ -66,13 +66,14 @@ const Notifications = ({ hideNotifications, items }: IProps) => {
           paddingY={12}
           justifyContent="space-between"
           alignItems="center"
+          onClick={toggleExpanded}
+          style={{ cursor: "pointer" }}
         >
           <Text variant="smallPlus" weight={700}>
             Notificaitons
           </Text>
           <Icon
             cursor="pointer"
-            onClick={toggleExpanded}
             iconName={expanded ? "ChevronUpSmall" : "ChevronDownSmall"}
             size={10}
           />

src/apps/actionCenter/notifications/notification.tsx

@@ -56,7 +56,7 @@ const Notification = ({ onClear, item }: IProps) => {
         </Stack>
         <Stack justifyContent="space-between" alignItems="center">
           <Text className="text-line-height" variant="smallPlus">
-            {item.desciption}
+            {item.description}
           </Text>
           <Text
             onClick={() => {

src/apps/actionCenter/quickSettings/button.tsx

@@ -2,8 +2,9 @@ import * as React from "react";
 import styled from "styled-components";
 
 import { Stack, Icon, Text, Image } from "atoms/styled";
+import { IButtonAction } from "../interface";
 
-const ButtonWrapper = styled.button`
+const ButtonWrapper = styled.button<{ selected?: boolean }>`
   background: ${({ theme }) => theme.colors.plain};
   border-radius: ${({ theme }) => theme.borderRadius}px;
   width: 91px;
@@ -13,18 +14,28 @@ const ButtonWrapper = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-`;
+  cursor: pointer;
 
-export type ButtonType = "NESTED" | "WITH_OPTIONS";
+  ${({ selected, theme }) =>
+    selected &&
+    `background: ${theme.colors.blue} !important;
+    color: ${theme.colors.plain} !important;`}
+`;
 
-interface IProps {
-  type?: "NESTED" | "WITH_OPTIONS";
-  label: string;
-  icon: string;
-  id: string;
+interface IProps extends IButtonAction {
+  toggleButton: (index: number, id: string) => void;
+  index: number;
 }
 
-const Button = ({ type, label, icon }: IProps) => {
+const Button = ({
+  type,
+  label,
+  icon,
+  selected,
+  toggleButton,
+  index,
+  id,
+}: IProps) => {
   switch (type) {
     case "NESTED": {
       return (
@@ -34,7 +45,12 @@ const Button = ({ type, label, icon }: IProps) => {
           flexDirection="column"
           alignItems="center"
         >
-          <ButtonWrapper>
+          <ButtonWrapper
+            selected={selected}
+            onClick={() => {
+              toggleButton(index, id);
+            }}
+          >
             <Icon iconName={icon} />
           </ButtonWrapper>
           <Text variant="small" textAlign="center">
@@ -51,10 +67,19 @@ const Button = ({ type, label, icon }: IProps) => {
           flexDirection="column"
           alignItems="center"
         >
-          <ButtonWrapper>
+          <ButtonWrapper
+            selected={selected}
+            onClick={() => {
+              toggleButton(index, id);
+            }}
+          >
             <Image
               height={16}
-              src={require(`../assests/${icon}-dark.png`).default}
+              src={
+                require(`../assests/${icon}-${
+                  !selected ? "black" : "white"
+                }.png`).default
+              }
             />
           </ButtonWrapper>
           <Text variant="small" textAlign="center">
@@ -71,7 +96,12 @@ const Button = ({ type, label, icon }: IProps) => {
           flexDirection="column"
           alignItems="center"
         >
-          <ButtonWrapper>
+          <ButtonWrapper
+            selected={selected}
+            onClick={() => {
+              toggleButton(index, id);
+            }}
+          >
             <Icon iconName={icon} />
           </ButtonWrapper>
           <Text variant="small" textAlign="center">

src/apps/actionCenter/quickSettings/buttonActionList.ts

@@ -0,0 +1,69 @@
+import { IButtonAction } from "../interface";
+
+export const buttonActions: Array<Omit<IButtonAction, "selected">> = [
+  {
+    type: "WITH_OPTIONS",
+    label: "WiFi",
+    icon: "wifi",
+    id: "wifi",
+  },
+  {
+    type: "WITH_OPTIONS",
+    label: "Bluetooth",
+    icon: "bluetooth",
+    id: "bluetooth",
+  },
+  {
+    type: "NESTED",
+    label: "Not Connected",
+    icon: "TVMonitor",
+    id: "external-monitor",
+  },
+  {
+    id: "theme",
+    type: "NESTED",
+    label: "Light Mode",
+    icon: "Lightbulb",
+  },
+  {
+    id: "tablet-mode",
+    label: "Tablet mode",
+    icon: "TabletMode",
+  },
+  {
+    id: "dnd",
+    label: "Do not distrub",
+    icon: "Blocked2",
+  },
+  {
+    id: "airplane",
+    label: "Airplane",
+    icon: "Airplane",
+  },
+  {
+    id: "location",
+    label: "Location",
+    icon: "MapPin",
+  },
+  {
+    id: "ease-of-access",
+    label: "Ease of Access",
+    icon: "EaseOfAccess",
+    type: "NESTED",
+  },
+];
+
+export const dummyNotification = [
+  {
+    title: "Budget Book",
+    description: "Just got installed, check it out.",
+    date: new Date().getTime(),
+    id: 1,
+  },
+  {
+    title: "Ping Pong",
+    description: "Just got installed, check it out.",
+    date: new Date().getTime() - 23134,
+    id: 2,
+  },
+];