NAN
This commit is contained in:
npcdazai
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user