first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,599 @@
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import VideocamIcon from "@mui/icons-material/Videocam";
|
||||
import CallIcon from "@mui/icons-material/Call";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import List from "@mui/material/List";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import ReplyIcon from "@mui/icons-material/Reply";
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Button from "@mui/material/Button";
|
||||
import SendIcon from "@mui/icons-material/Send";
|
||||
|
||||
const ChatBoxTwo = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
border: "1px solid #F5F4F6",
|
||||
borderRadius: "14px",
|
||||
}}
|
||||
className="for-dark-chat-box"
|
||||
>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #F5F4F6",
|
||||
borderRadius: "10px",
|
||||
p: "15px",
|
||||
}}
|
||||
className="for-dark-chat-header"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="user"
|
||||
width="40px"
|
||||
height="40px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box className="ml-1">
|
||||
<Typography as="h5" fontWeight="500">
|
||||
Nunez Faulkner
|
||||
</Typography>
|
||||
<Typography fontSize="12px" position="relative">
|
||||
<span className="active-status2 successBgColor"></span> Active
|
||||
Now
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px for-dark-button'
|
||||
>
|
||||
<VideocamIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px for-dark-button'
|
||||
>
|
||||
<CallIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px for-dark-button'
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Chat List */}
|
||||
<div className="chat-list-box">
|
||||
{/* Left Chat */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
maxWidth: "730px",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="user"
|
||||
width="35px"
|
||||
height="35px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
background: "#F5F6FA",
|
||||
borderRadius: "0px 15px 15px 15px",
|
||||
p: "14px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pharetra ligula non varius curabitur etiam malesuada. Congue
|
||||
eget luctus aliquet consectetur.
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="12px">19:04</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Replay Dropdown */}
|
||||
<Box className="ml-1">
|
||||
<div className="right-replay-box">
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
<div className="hover-caption">
|
||||
<List sx={{ display: "inline" }}>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<ReplyIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Reply"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<DeleteOutlineIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Delete"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Right Chat */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "end",
|
||||
maxWidth: "730px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
{/* Replay Dropdown */}
|
||||
<Box>
|
||||
<div className="left-replay-box">
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
<div className="hover-caption">
|
||||
<List sx={{ display: "inline" }}>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<ReplyIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Reply"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<DeleteOutlineIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Delete"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box className="mr-1">
|
||||
<Typography
|
||||
sx={{
|
||||
background: "#757FEF",
|
||||
color: "#fff !important",
|
||||
borderRadius: "15px 0 15px 15px",
|
||||
p: "14px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="12px" textAlign="end">
|
||||
19:04
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/user4.png"
|
||||
alt="user"
|
||||
width="35px"
|
||||
height="35px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Left Chat */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
maxWidth: "730px",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="user"
|
||||
width="35px"
|
||||
height="35px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
background: "#F5F6FA",
|
||||
borderRadius: "0px 15px 15px 15px",
|
||||
p: "14px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
Lorem ipsum dolor sit amet 🔥! Lorem ipsum dolor sit amet,
|
||||
consectetur adipiscing elit.
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="12px">19:04</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Replay Dropdown */}
|
||||
<Box className="ml-1">
|
||||
<div className="right-replay-box">
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
<div className="hover-caption">
|
||||
<List sx={{ display: "inline" }}>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<ReplyIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Reply"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<DeleteOutlineIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Delete"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Right Chat */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "end",
|
||||
maxWidth: "730px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
{/* Replay Dropdown */}
|
||||
<Box>
|
||||
<div className="left-replay-box">
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
<div className="hover-caption">
|
||||
<List sx={{ display: "inline" }}>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<ReplyIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Reply"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<DeleteOutlineIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Delete"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box className="mr-1">
|
||||
<Typography
|
||||
sx={{
|
||||
background: "#757FEF",
|
||||
color: "#fff !important",
|
||||
borderRadius: "15px 0 15px 15px",
|
||||
p: "14px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem
|
||||
ipsum dolor sit
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="12px" textAlign="end">
|
||||
19:04
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/user4.png"
|
||||
alt="user"
|
||||
width="35px"
|
||||
height="35px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Left Chat */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
maxWidth: "730px",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="user"
|
||||
width="35px"
|
||||
height="35px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
}}
|
||||
className="ml-1"
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
background: "#F5F6FA",
|
||||
borderRadius: "0px 15px 15px 15px",
|
||||
p: "14px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo.
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="12px">19:04</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Replay Dropdown */}
|
||||
<Box className="ml-1">
|
||||
<div className="right-replay-box">
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon fontSize="small" />
|
||||
</IconButton>
|
||||
|
||||
<div className="hover-caption">
|
||||
<List sx={{ display: "inline" }}>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<ReplyIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Reply"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ padding: "1px 15px" }}>
|
||||
<DeleteOutlineIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: "-4px" }}
|
||||
className="mr-5px"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Delete"
|
||||
primaryTypographyProps={{ fontSize: "12px" }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<Box
|
||||
sx={{
|
||||
background: "#F5F6FA",
|
||||
borderRadius: "15px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
p: "15px",
|
||||
position: "relative",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Box>
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='mr-5px for-dark-button'
|
||||
>
|
||||
<VideocamIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='mr-5px for-dark-button'
|
||||
>
|
||||
<CallIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
onSubmit={handleSubmit}
|
||||
sx={{
|
||||
flex: "auto",
|
||||
}}
|
||||
className="pr-60px"
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="typeSomething"
|
||||
label="Type Something..."
|
||||
name="typeSomething"
|
||||
autoComplete="typeSomething"
|
||||
InputProps={{
|
||||
style: {
|
||||
borderRadius: 100,
|
||||
background: "#fff",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "100%",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
padding: "0",
|
||||
minWidth: "44px",
|
||||
minHeight: "44px",
|
||||
position: "absolute",
|
||||
top: "22px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
className="right-20px"
|
||||
>
|
||||
<SendIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBoxTwo;
|
||||
Reference in New Issue
Block a user