From 46e1dbb8d50574b2930bf097a444f75540982c99 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Mon, 25 Jul 2022 01:26:25 +0800
Subject: [PATCH] =?UTF-8?q?fe-24=20=E7=BD=91=E9=A1=B5=E8=84=9A=E6=B3=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/components/Chat.jsx   | 63 +++++++++++++++++++++++++++++++++
 lazy-timer-fe/src/components/Footer.jsx | 11 ++++++
 2 files changed, 74 insertions(+)
 create mode 100644 lazy-timer-fe/src/components/Chat.jsx
 create mode 100644 lazy-timer-fe/src/components/Footer.jsx

diff --git a/lazy-timer-fe/src/components/Chat.jsx b/lazy-timer-fe/src/components/Chat.jsx
new file mode 100644
index 0000000..3eb84a6
--- /dev/null
+++ b/lazy-timer-fe/src/components/Chat.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { MdOutlineCancel } from 'react-icons/md';
+
+import { Button } from '.';
+import { chatData } from '../data/dummy';
+import { useStateContext } from '../contexts/ContextProvider';
+
+const Chat = () => {
+  const { currentColor } = useStateContext();
+
+  return (
+    <div className="nav-item absolute right-5 md:right-52 top-16 bg-white dark:bg-[#42464D] p-8 rounded-lg w-96">
+      <div className="flex justify-between items-center">
+        <div className="flex gap-3">
+          <p className="font-semibold text-lg dark:text-gray-200">Messages</p>
+          <button type="button" className="text-white  text-xs rounded p-1 px-2 bg-orange">
+            5 New
+          </button>
+        </div>
+        <Button
+          icon={<MdOutlineCancel />}
+          color="rgb(153, 171, 180)"
+          bgHoverColor="light-gray"
+          size="2xl"
+          borderRadius="50%"
+        />
+      </div>
+      <div className="mt-5 ">
+        {chatData?.map((item, index) => (
+          <div key={index} className="flex items-center gap-5 border-b-1 border-color p-3 leading-8 cursor-pointer">
+            <div className="relative">
+              <img
+                className="rounded-full h-10 w-10"
+                src={item.image}
+                alt={item.message}
+              />
+              <span
+                style={{ background: item.dotColor }}
+                className="absolute inline-flex rounded-full h-2 w-2 right-0 -top-1"
+              />
+            </div>
+            <div>
+              <p className="font-semibold dark:text-gray-200 ">{item.message}</p>
+              <p className="text-gray-500 dark:text-gray-400 text-sm">{item.desc}</p>
+              <p className="text-gray-500 dark:text-gray-400 text-xs">{item.time}</p>
+            </div>
+          </div>
+        ))}
+        <div className="mt-5">
+          <Button
+            color="white"
+            bgColor={currentColor}
+            text="See all messages"
+            borderRadius="10px"
+            width="full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Chat;
diff --git a/lazy-timer-fe/src/components/Footer.jsx b/lazy-timer-fe/src/components/Footer.jsx
new file mode 100644
index 0000000..fab337a
--- /dev/null
+++ b/lazy-timer-fe/src/components/Footer.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => (
+  <div className="mt-24">
+    <p className="dark:text-gray-200 text-gray-700 text-center m-20">
+      © 2022 All rights reserved by Shoppy.com
+    </p>
+  </div>
+);
+
+export default Footer;