feat: card for no more surveys

wizelineacademy · Jun 5, 2024 · 43bf48e · 43bf48e
1 parent ad6de96
commit 43bf48e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/components/NotificationCard.tsx b/components/NotificationCard.tsx
@@ -2,12 +2,14 @@
 
 import { Notification } from "@/types/types";
 import { parseDate } from "@/utils/utils";
+import PartyIcon from "./icons/PartyIcon";
 
 interface NotificationCardProps {
-  notification: Notification;
+  notification?: Notification;
+  empty?: boolean;
 }
 
-const NotificationCard = ({ notification }: NotificationCardProps) => {
+const NotificationCard = ({ notification, empty }: NotificationCardProps) => {
   const getTitle = (type: string) => {
     switch (type) {
       case "RULER":
@@ -21,6 +23,32 @@ const NotificationCard = ({ notification }: NotificationCardProps) => {
     }
   };
 
+  if (empty)
+    return (
+      <div
+        data-testid="empty-notification"
+        className={`flex w-full items-center rounded-t-md p-2`}
+      >
+        <PartyIcon color="text-primary" size="h-8 w-8" />
+        <div className="ms-4 flex w-full flex-col justify-start">
+          <p className="text-md text-start font-bold text-primary">
+            CONGRATULATIONS!
+          </p>
+          <p className="test-start text-xs">
+            You have <strong>no pending surveys</strong> , take a rest and enjoy
+            the rest of your day!
+          </p>
+          {/*           <p className="text-start text-xs">
+          You have a pending survery.
+          <strong> Click here </strong>
+          and answer your
+          <strong> {notification.type} </strong>
+          survey{" "}
+        </p> */}
+        </div>
+      </div>
+    );
+  if (!notification) return <></>;
   return (
     <div
       data-testid={`${getTitle(notification.type)}`}

diff --git a/components/Notifications.tsx b/components/Notifications.tsx
@@ -115,7 +115,7 @@ const Notifications = () => {
               {({ close }) => (
                 <div className="sticky top-0 z-50 flex flex-row items-center justify-between bg-white pt-3">
                   <div className="flex flex-row gap-1">
-                    <p className="text-md font-bold text-black">
+                    <p className="text-md font-medium text-black">
                       Notifications
                     </p>
                     <p className="">({notificationsQuery.data.length})</p>
@@ -149,9 +149,7 @@ const Notifications = () => {
             {notificationsQuery.data.length === 0 && (
               <div className="flex h-5/6 w-full items-center justify-center py-1">
                 <Menu.Item>
-                  <p className="items-center py-2 text-sm">
-                    No tienes ninguna notificación
-                  </p>
+                  <NotificationCard empty={true} />
                 </Menu.Item>
               </div>
             )}

diff --git a/components/icons/PartyIcon.tsx b/components/icons/PartyIcon.tsx
@@ -0,0 +1,21 @@
+interface InterfacePartyIcon {
+  color: string;
+  size: string;
+}
+const PartyIcon = ({ color, size }: InterfacePartyIcon) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+    className={`${size} ${color}`}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m16.942,16.73c.198-1.011-.118-2.05-.847-2.778l-6.047-6.047c-.729-.729-1.767-1.043-2.778-.848-1.011.198-1.853.884-2.253,1.833L.211,20.302c-.421,1.003-.197,2.146.572,2.915.511.511,1.188.781,1.878.781.349,0,.701-.068,1.037-.21l11.411-4.805c.949-.399,1.634-1.242,1.833-2.253Zm-2.996-.513h0l-10.646,4.483,4.482-10.646.145-.028,6.072,6.127c-.009.047-.036.058-.052.064ZM12.843.562c.518-.638,1.443-.748,2.086-.239.839.662,2.218,2.413,2.068,4.773-.074,1.156-.512,2.27-1.302,3.311-.295.39-.743.594-1.196.594-.316,0-.635-.1-.906-.305-.66-.501-.789-1.442-.288-2.102.427-.563.662-1.132.698-1.689.087-1.36-.905-2.203-.947-2.238-.63-.525-.73-1.467-.213-2.104Zm10.883,11.074c.477.677.315,1.613-.362,2.09-.263.186-.564.274-.863.274-.462,0-.917-.213-1.209-.61-.034-.042-.331-.39-.792-.39-.235,0-.432.062-.602.19-.661.498-1.602.367-2.101-.294s-.368-1.602.293-2.101c.69-.521,1.523-.796,2.409-.796,2.015,0,3.108,1.468,3.226,1.636Zm-2.726-10.136c0-.828.672-1.5,1.5-1.5s1.5.672,1.5,1.5-.672,1.5-1.5,1.5-1.5-.672-1.5-1.5Zm-2,5c0-.828.672-1.5,1.5-1.5s1.5.672,1.5,1.5-.672,1.5-1.5,1.5-1.5-.672-1.5-1.5ZM8,2.5c0-.828.672-1.5,1.5-1.5s1.5.672,1.5,1.5-.672,1.5-1.5,1.5-1.5-.672-1.5-1.5Zm15,16c0,.828-.672,1.5-1.5,1.5s-1.5-.672-1.5-1.5.672-1.5,1.5-1.5,1.5.672,1.5,1.5ZM1,3.5c0-.828.672-1.5,1.5-1.5s1.5.672,1.5,1.5-.672,1.5-1.5,1.5-1.5-.672-1.5-1.5Zm17,19c0,.828-.672,1.5-1.5,1.5s-1.5-.672-1.5-1.5.672-1.5,1.5-1.5,1.5.672,1.5,1.5Z"
+    />
+  </svg>
+);
+
+export default PartyIcon;