From 78ff2d9abdbecf9fc8bdb75bedbfbc16c65f7835 Mon Sep 17 00:00:00 2001
From: npcdazai <prathammandavkar932@gmail.com>
Date: Thu, 10 Oct 2024 12:06:28 +0530
Subject: [PATCH] NAN

---
 src/Pages/SupportAndTicket/ViewTicket.jsx | 448 +++++++++++-----------
 1 file changed, 222 insertions(+), 226 deletions(-)

diff --git a/src/Pages/SupportAndTicket/ViewTicket.jsx b/src/Pages/SupportAndTicket/ViewTicket.jsx
index 9538d55..b6f2499 100644
--- a/src/Pages/SupportAndTicket/ViewTicket.jsx
+++ b/src/Pages/SupportAndTicket/ViewTicket.jsx
@@ -1,241 +1,237 @@
 import {
-  Box,
-  Button,
-  Flex,
-  HStack,
-  Image,
-  Input,
-  Switch,
-  Tag,
-  Text,
-  Textarea,
-  VStack,
-} from "@chakra-ui/react";
-import React from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import womenpfp from "../../assets/womenpfp1.png";
-import { AttachmentIcon } from "@chakra-ui/icons";
-
-const data = [{ id: 1, label: "Ticket ID:" }];
-
-const ViewTicket = () => {
-  return (
-    <Box
-      bgColor="#F3F3F9"
-      {...OPACITY_ON_LOAD}
-      p={4}
-      overflowX="scroll"
-      display="flex"
-      flexDirection="column"
-      gap={4}
-    >
-      <Flex
-        p={4}
-        alignItems="flex-start"
-        flexDirection="row"
-        gap={2}
-        bgColor="#FFFFFF"
-        boxShadow="0px 6px 12px 0px #0000001A"
-        h="100%"
-        borderRadius="10px"
-        justifyContent="space-between"
-      >
-        <VStack alignItems="flex-start">
-          <HStack alignItems="center" gap={2}>
-            <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
-              Ticket ID:
-            </Text>
-            <Box
-              borderRadius="50px"
-              p={1}
-              variant="outline"
-              bgColor="#F0F9F2"
-              color="#202020"
-              fontSize="x-small"
-              border="1px solid #9E9E9E"
-            >
-              #1E233
-            </Box>
-          </HStack>
-          <HStack alignItems="center" gap={2}>
-            <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
-              Created:
-            </Text>
-            <Text as="span" fontSize="small" color="#202020" fontWeight={600}>
-              31 Dec 2022
-            </Text>
-          </HStack>
-          <HStack alignItems="center" gap={2}>
-            <Text fontSize="small" as="span" color="#7E7E7E" fontWeight={400}>
-              Last message:
-            </Text>
-            <Text fontSize="small" as="span" color="#202020" fontWeight={600}>
-              31 Dec 2022
-            </Text>
-          </HStack>
-        </VStack>
-
-        <VStack>
-          <HStack alignItems="center" gap={2}>
-            <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
-              Status:
-            </Text>
-            <Box
-              borderRadius="50px"
-              p={1}
-              variant="outline"
-              bgColor="#F0F9F2"
-              color="#03781D"
-              fontSize="x-small"
-              border="1px solid #6DC580"
-            >
-              Open
-            </Box>
-          </HStack>
-          <HStack alignItems="center" gap={2}>
-            <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
-              Priority:
-            </Text>
-            <Box
-              borderRadius="50px"
-              p={1}
-              variant="outline"
-              bgColor="#F0F9F2"
-              color="#BA1717"
-              fontSize="x-small"
-              border="1px solid #E2A1A1"
-            >
-              Urgent
-            </Box>
-          </HStack>
-        </VStack>
-      </Flex>
-
+    Box,
+    Button,
+    Flex,
+    HStack,
+    Image,
+    Input,
+    Switch,
+    Tag,
+    Text,
+    Textarea,
+    VStack,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  import womenpfp from "../../assets/womenpfp1.png";
+  import { AttachmentIcon } from "@chakra-ui/icons";
+  
+  const data = [
+    { id: 1, label: "Ticket ID:", value: "#1E233" },
+    { id: 2, label: "Created:", value: "31 Dec 2022" },
+    { id: 3, label: "Last message:", value: "31 Dec 2022" },
+  ];
+  
+  const ViewTicket = () => {
+    return (
       <Box
+        bgColor="#F3F3F9"
+        {...OPACITY_ON_LOAD}
         p={4}
-        flexDirection="row"
-        gap={2}
-        bgColor="#FFFFFF"
-        justifyContent="flex-end"
-        boxShadow="0px 6px 12px 0px #0000001A"
-        borderRadius="10px"
+        overflowX="scroll"
+        display="flex"
+        flexDirection="column"
+        gap={4}
       >
-        <Flex p={4} alignItems="flex-start" flexDirection="row">
-          <Box
-            bgColor="#FFFF"
-            h="30px"
-            w="30px"
-            borderRadius="50%"
-            boxShadow="0px 4px 20px 0px #00000040"
-            pt="3px"
-            pr="4px"
-          >
-            <Image src={womenpfp} h="25px" w="25px" />
-          </Box>
-
-          <VStack alignItems="flex-start" gap={2}>
-            <Box
-              borderTopRadius="10px"
-              borderBottomRightRadius="10px"
-              borderBottomLeftRadius="10px"
-              color="#000000"
-              backgroundColor="#EBEBEB"
-              fontSize="small"
-              p={4}
-            >
-              This is some placeholder text that you can replace with meaningful
-              content. It’s designed to demonstrate how the Box component will
-              render with the specified styles.
-            </Box>
-            <HStack ml={1} alignSelf="flex-start">
-              <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
-                Katherine
+        <Flex
+          p={4}
+          alignItems="flex-start"
+          flexDirection="row"
+          gap={2}
+          bgColor="#FFFFFF"
+          boxShadow="0px 6px 12px 0px #0000001A"
+          h="100%"
+          borderRadius="10px"
+          justifyContent="space-between"
+        >
+          <VStack alignItems="flex-start">
+            {data.map((item) => (
+              <HStack key={item.id} alignItems="center" gap={2}>
+                <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
+                  {item.label}
+                </Text>
+                {item.label === "Ticket ID:" ? (
+                  <Box
+                    borderRadius="50px"
+                    p={1}
+                    variant="outline"
+                    bgColor="#F0F9F2"
+                    color="#202020"
+                    fontSize="x-small"
+                    border="1px solid #9E9E9E"
+                  >
+                    {item.value}
+                  </Box>
+                ) : (
+                  <Text as="span" fontSize="small" color="#202020" fontWeight={600}>
+                    {item.value}
+                  </Text>
+                )}
+              </HStack>
+            ))}
+          </VStack>
+  
+          <VStack>
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
+                Status:
               </Text>
-              <Text color="#3F3F3F" fontSize="x-small" fontWeight={400}>
-                Today, 11:30 PM
+              <Box
+                borderRadius="50px"
+                p={1}
+                variant="outline"
+                bgColor="#F0F9F2"
+                color="#03781D"
+                fontSize="x-small"
+                border="1px solid #6DC580"
+              >
+                Open
+              </Box>
+            </HStack>
+            <HStack alignItems="center" gap={2}>
+              <Text as="span" color="#7E7E7E" fontSize="small" fontWeight={400}>
+                Priority:
               </Text>
+              <Box
+                borderRadius="50px"
+                p={1}
+                variant="outline"
+                bgColor="#F0F9F2"
+                color="#BA1717"
+                fontSize="x-small"
+                border="1px solid #E2A1A1"
+              >
+                Urgent
+              </Box>
             </HStack>
           </VStack>
         </Flex>
-
-        <Flex p={4} flexDirection="row" gap={2} justifyContent="flex-end">
-          <VStack alignItems="flex-start" gap={2}>
+  
+        <Box
+          p={4}
+          flexDirection="row"
+          gap={2}
+          bgColor="#FFFFFF"
+          justifyContent="flex-end"
+          boxShadow="0px 6px 12px 0px #0000001A"
+          borderRadius="10px"
+        >
+          <Flex p={4} alignItems="flex-start" flexDirection="row">
             <Box
-              borderTopRadius="10px"
-              borderBottomRightRadius="10px"
-              borderBottomLeftRadius="10px"
-              color="#000000"
-              backgroundColor="#F7F5FF"
-              fontSize="small"
-              p={4}
+              bgColor="#FFFF"
+              h="30px"
+              w="30px"
+              borderRadius="50%"
+              boxShadow="0px 4px 20px 0px #00000040"
+              p={1}
             >
-              Life seasons open have. Air have of.
+              <Image src={womenpfp} />
             </Box>
-            <HStack ml={1} alignSelf="flex-end">
-              <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
-                Katherine
-              </Text>
-              <Text color="#3F3F3F" fontSize="x-small" fontWeight={400}>
-                Today, 11:30 PM
-              </Text>
+  
+            <VStack alignItems="flex-start" gap={2}>
+              <Box
+                borderTopRadius="10px"
+                borderBottomRightRadius="10px"
+                borderBottomLeftRadius="10px"
+                color="#000000"
+                backgroundColor="#EBEBEB"
+                fontSize="small"
+                p={4}
+              >
+                This is some placeholder text that you can replace with meaningful
+                content. It’s designed to demonstrate how the Box component will
+                render with the specified styles.
+              </Box>
+              <HStack ml={1} alignSelf="flex-start">
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
+                  Katherine
+                </Text>
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={400}>
+                  Today, 11:30 PM
+                </Text>
+              </HStack>
+            </VStack>
+          </Flex>
+  
+          <Flex p={4} flexDirection="row" gap={2} justifyContent="flex-end">
+            <VStack alignItems="flex-start" gap={2}>
+              <Box
+                borderTopRadius="10px"
+                borderBottomRightRadius="10px"
+                borderBottomLeftRadius="10px"
+                color="#000000"
+                backgroundColor="#F7F5FF"
+                fontSize="small"
+                p={4}
+              >
+                Life seasons open have. Air have of.
+              </Box>
+              <HStack ml={1} alignSelf="flex-end">
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={600}>
+                  Katherine
+                </Text>
+                <Text color="#3F3F3F" fontSize="x-small" fontWeight={400}>
+                  Today, 11:30 PM
+                </Text>
+              </HStack>
+            </VStack>
+            <Box
+              bgColor="#FFFF"
+              h="30px"
+              w="30px"
+              borderRadius="50%"
+              boxShadow="0px 4px 20px 0px #00000040"
+              pt="3px"
+              pr="4px"
+            >
+              <Image src={womenpfp} h="25px" w="25px" />
+            </Box>
+          </Flex>
+        </Box>
+  
+        <Flex
+          p={4}
+          alignItems="flex-start"
+          flexDirection="column"
+          gap={3}
+          bgColor="#FFFFFF"
+          boxShadow="0px 6px 12px 0px #0000001A"
+          h="100%"
+          borderRadius="10px"
+        >
+          <Textarea fontSize="small" placeholder="Write  your response for issue" outline="none" />
+  
+          <HStack w="100%" justifyContent="space-between">
+            <HStack alignItems="center">
+              <Switch w="44px" size="sm" />
+              <Text as="span" color="#5F5F5F" fontSize="small">Private</Text>
             </HStack>
-          </VStack>
-          <Box
-            bgColor="#FFFF"
-            h="30px"
-            w="30px"
-            borderRadius="50%"
-            boxShadow="0px 4px 20px 0px #00000040"
-            pt="3px"
-            pr="4px"
-          >
-            <Image src={womenpfp} h="25px" w="25px" />
-          </Box>
+            <HStack>
+              <Button
+                as="label"
+                htmlFor="file-upload"
+                leftIcon={<AttachmentIcon />}
+                variant="outline"
+                cursor="pointer"
+                border="1px solid #9E9E9E"
+                bgColor="#FFFFFF"
+                color="#5F5F5F"
+                borderRadius="5px"
+                fontSize="small"
+              >
+                Attach
+                <Input id="file-upload" type="file" display="none" />
+              </Button>
+  
+              <Button fontSize="small" color="#fff" bgColor="#3818D9">
+                Send
+              </Button>
+            </HStack>
+          </HStack>
         </Flex>
       </Box>
-
-      <Flex
-        p={4}
-        alignItems="flex-start"
-        flexDirection="column"
-        gap={3}
-        bgColor="#FFFFFF"
-        boxShadow="0px 6px 12px 0px #0000001A"
-        h="100%"
-        borderRadius="10px"
-      >
-        <Textarea fontSize="small" placeholder="Write  your response for issue" outline="none" />
-
-        <HStack w="100%" justifyContent="space-between">
-          <HStack alignItems="center">
-            <Switch w="44px" size="sm" />
-            <Text as="span" color="#5F5F5F" fontSize="small">Private</Text>
-          </HStack>
-          <HStack>
-            <Button
-              as="label"
-              htmlFor="file-upload"
-              leftIcon={<AttachmentIcon />}
-              variant="outline"
-              cursor="pointer"
-              border="1px solid #9E9E9E"
-              bgColor="#FFFFFF"
-              color="#5F5F5F"
-              borderRadius="5px"
-              fontSize="small"
-            >
-              Attach
-              <Input id="file-upload" type="file" display="none" />
-            </Button>
-
-            <Button fontSize="small" color="#fff" bgColor="#3818D9">
-              Send
-            </Button>
-          </HStack>
-        </HStack>
-      </Flex>
-    </Box>
-  );
-};
-
-export default ViewTicket;
+    );
+  };
+  
+  export default ViewTicket;
+  
\ No newline at end of file