jornada-ui 0.4.14 → 0.4.16

package/src/components/card-work-session/index.tsx

@@ -1,172 +1,190 @@
-/**
- * Imports
- */
-import React, { forwardRef } from "react";
-import { Image, TouchableOpacity } from "react-native";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-import { IMAGES } from "../../common/constants";
-
-// typings
-import { type ICardWorkSession } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const CardWorkSession = forwardRef<any, ICardWorkSession>((props, ref): React.ReactElement => {
-  const {
-    name = "Weverson L.S",
-    workDate = "25/01/2025",
-    timeWork = "",
-    initialTime = "11:40",
-    duration = "05:20",
-    avatar = "",
-    backgroundColor,
-    width,
-    handleNavigation,
-  } = props;
-  return (
-    <Box
-      ref={ref}
-      width={width}
-      paddingStyle={{ padding: theme.paddings.md }}
-      borderStyled={{
-        borderBottomWidth: theme.borderWidths.thin,
-        borderColor: backgroundColor ?? theme.colors.neutral[200],
-      }}
-      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
-      style={{
-        position: "relative",
-      }}
-    >
-      {/* Cabeçalho com imagem e ícone */}
-      <Box
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <TouchableOpacity onPress={handleNavigation}>
-          <Image
-            style={{
-              width: 50,
-              height: 50,
-              borderRadius: 25,
-              borderWidth: theme.borderWidths.thin_medium,
-              borderColor: theme.colors.blue[500],
-            }}
-            source={{ uri: avatar || IMAGES.IMAGE_ANONIMA }}
-          />
-        </TouchableOpacity>
-
-        <Box style={{ position: "absolute", left: 57, top: 5 }}>
-          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
-            <Typography
-              text={"Jornada Trabalho: "}
-              fontFamily={theme.fonts.inter_bold_700}
-              size={12}
-              color={theme.colors.black[100]}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={workDate}
-              size={12}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.gray[800]}
-            />
-          </Box>
-
-          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
-            <Typography
-              text={"Tempo Jornada: "}
-              size={11}
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_bold_700}
-              letterSpacing={"regular"}
-            />
-
-            <Typography
-              text={timeWork}
-              size={11}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.gray[800]}
-              letterSpacing={"regular"}
-            />
-          </Box>
-        </Box>
-
-        <Icons icon={"BELL"} size={28} />
-      </Box>
-
-      <Box
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Typography
-          text={`Olá, ${name}`}
-          size={16}
-          color={theme.colors.black[100]}
-          fontFamily={theme.fonts.inter_bold_700}
-          marginLeft={-5}
-        />
-
-        {/* Seção de horário */}
-        <Box flexStyle={{ flexDirection: "row" }}>
-          <Box marginStyle={{ marginRight: 15 }}>
-            <Typography
-              text={`${initialTime}`}
-              size={15}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-            />
-
-            <Typography
-              text={"INÍCIO"}
-              size={10}
-              align="center"
-              color={theme.colors.neutral[200]}
-              fontFamily={theme.fonts.inter_medium_500}
-              marginTop={-8}
-            />
-          </Box>
-          <Box>
-            <Typography
-              text={`${duration}`}
-              size={15}
-              align="center"
-              color={theme.colors.black[100]}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-            />
-
-            <Typography
-              text={"DURAÇÃO"}
-              size={10}
-              align="center"
-              color={theme.colors.neutral[200]}
-              fontFamily={theme.fonts.inter_medium_500}
-              marginTop={-8}
-            />
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-});
-
-CardWorkSession.displayName = "CardWorkSession";
-
-/**
- * Componente CardWorkSession para a interação da  ui.
- */
-export default asBaseComponent(CardWorkSession);
+/**
+ * Imports
+ */
+import React, { forwardRef } from "react";
+import { Image, TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+import { IMAGES } from "../../common/constants";
+
+// typings
+import { type ICardWorkSession } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const CardWorkSession = forwardRef<any, ICardWorkSession>((props, ref): React.ReactElement => {
+  const {
+    name = "Weverson L.S",
+    workDate = "25/01/2025",
+    initialTime = "11:40",
+    duration = "05:20",
+    avatar = "",
+    backgroundColor,
+    width,
+    handleNavigation,
+    handleNavigationNotification,
+    counterBadge,
+  } = props;
+  return (
+    <Box
+      ref={ref}
+      width={width}
+      paddingStyle={{ padding: theme.paddings.md }}
+      borderStyled={{
+        borderBottomWidth: theme.borderWidths.thin,
+        borderColor: backgroundColor ?? theme.colors.neutral[200],
+      }}
+      backgroundColor={backgroundColor ?? theme.colors.neutral[25]}
+      style={{
+        position: "relative",
+      }}
+    >
+      {/* Cabeçalho com imagem e ícone */}
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <TouchableOpacity onPress={handleNavigation}>
+          <Image
+            style={{
+              width: 50,
+              height: 50,
+              borderRadius: 25,
+              borderWidth: theme.borderWidths.thin_medium,
+              borderColor: theme.colors.blue[500],
+            }}
+            source={{ uri: avatar || IMAGES.IMAGE_ANONIMA }}
+          />
+        </TouchableOpacity>
+
+        <Box style={{ position: "absolute", left: 57, top: 5 }}>
+          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
+            <Typography
+              text={"Jornada Trabalho: "}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={12}
+              color={theme.colors.black[100]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={workDate}
+              size={12}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[800]}
+            />
+          </Box>
+
+          <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: -5 }}>
+            <Typography
+              text={"Tempo Jornada: "}
+              size={11}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_bold_700}
+              letterSpacing={"regular"}
+            />
+          </Box>
+        </Box>
+
+        <TouchableOpacity activeOpacity={0.7} onPress={handleNavigationNotification}>
+          {counterBadge > 0 && (
+            <Box
+              backgroundColor={theme.colors.red[500]}
+              flexStyle={{ alignItems: "center", justifyContent: "center" }}
+              borderStyled={{ borderRadius: theme.borderWidths.hairline }}
+              style={[
+                counterBadge < 10
+                  ? { right: -5, top: -2, height: 16, width: 16 }
+                  : { right: -8, top: -5, padding: 2 },
+                { position: "absolute", zIndex: 10 },
+              ]}
+            >
+              <Typography
+                text={`${counterBadge}`}
+                align={"center"}
+                size={theme.fontSizes["2xs"]}
+                color={theme.colors.neutral[25]}
+                fontFamily={theme.fonts.inter_bold_700}
+                lineHeight={theme.fontSizes.sm}
+                letterSpacing={"regular"}
+              />
+            </Box>
+          )}
+          <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
+        </TouchableOpacity>
+      </Box>
+
+      <Box
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Typography
+          text={`Olá, ${name}`}
+          size={16}
+          color={theme.colors.black[100]}
+          fontFamily={theme.fonts.inter_bold_700}
+          marginLeft={-5}
+        />
+
+        {/* Seção de horário */}
+        <Box flexStyle={{ flexDirection: "row" }}>
+          <Box marginStyle={{ marginRight: 15 }}>
+            <Typography
+              text={`${initialTime}`}
+              size={15}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"INÍCIO"}
+              size={10}
+              align="center"
+              color={theme.colors.neutral[200]}
+              fontFamily={theme.fonts.inter_medium_500}
+              marginTop={-8}
+            />
+          </Box>
+          <Box>
+            <Typography
+              text={`${duration}`}
+              size={15}
+              align="center"
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+            />
+
+            <Typography
+              text={"DURAÇÃO"}
+              size={10}
+              align="center"
+              color={theme.colors.neutral[200]}
+              fontFamily={theme.fonts.inter_medium_500}
+              marginTop={-8}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+});
+
+CardWorkSession.displayName = "CardWorkSession";
+
+/**
+ * Componente CardWorkSession para a interação da  ui.
+ */
+export default asBaseComponent(CardWorkSession);