diff --git a/package-lock.json b/package-lock.json index c1f606e..404ce2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4552,6 +4552,7 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", + "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -7707,6 +7708,12 @@ "dev": true, "dependencies": { "imagemin": "^7.0.1", + "imagemin-gifsicle": "^7.0.0", + "imagemin-mozjpeg": "^9.0.0", + "imagemin-optipng": "^8.0.0", + "imagemin-pngquant": "^9.0.2", + "imagemin-svgo": "^9.0.0", + "imagemin-webp": "^7.0.0", "loader-utils": "^2.0.0", "object-assign": "^4.1.1", "schema-utils": "^2.7.1" diff --git a/src/components/contacts/Body.tsx b/src/components/contacts/Body.tsx new file mode 100644 index 0000000..f4f6a66 --- /dev/null +++ b/src/components/contacts/Body.tsx @@ -0,0 +1,28 @@ +import { Box, Toolbar } from "@mui/material"; +import React from "react"; +import UpperBody from "./UpperBody"; +import LowerBody from "./LowerBody"; +import ContactInfo from "./ContactInfo"; + +interface Props { + contactSelected: ContactInfo; +} + +const Body: React.FC = (props) => { + return ( + + + + + + ); +}; + +export default Body; diff --git a/src/components/contacts/ContactInfo.tsx b/src/components/contacts/ContactInfo.tsx new file mode 100644 index 0000000..27646b6 --- /dev/null +++ b/src/components/contacts/ContactInfo.tsx @@ -0,0 +1,8 @@ +import Status from "./Status"; + +interface ContactInfo { + name: string; + status: Status; +} + +export default ContactInfo; diff --git a/src/components/contacts/ContactItem.tsx b/src/components/contacts/ContactItem.tsx new file mode 100644 index 0000000..36f5043 --- /dev/null +++ b/src/components/contacts/ContactItem.tsx @@ -0,0 +1,33 @@ +import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import React from "react"; +import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; +import CircleIcon from "@mui/icons-material/Circle"; +import ContactInfo from "./ContactInfo"; +import { returnStatusColor } from "./Utils"; + +interface Props { + contactInfo: ContactInfo; + setContactSelected: (contactInfo: ContactInfo) => void; +} + +const ContactItem: React.FC = (props) => { + return ( + { + props.setContactSelected(props.contactInfo); + }} + > + + + + + + + ); +}; + +export default ContactItem; diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 1337589..7fcc7e6 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -1,5 +1,22 @@ +import { Box } from "@mui/material"; +import React from "react"; +import Body from "./Body"; + +import ContactInfo from "./ContactInfo"; +import Sidebar from "./Sidebar"; + const Contacts: React.FC = () => { - return Contacts; + const [contactSelected, setContactSelected] = + React.useState(null); + + return ( + + + {contactSelected !== null ? ( + + ) : null} + + ); }; export default Contacts; diff --git a/src/components/contacts/LowerBody.tsx b/src/components/contacts/LowerBody.tsx new file mode 100644 index 0000000..35bb6cc --- /dev/null +++ b/src/components/contacts/LowerBody.tsx @@ -0,0 +1,55 @@ +import { Box, List, Typography } from "@mui/material"; +import React from "react"; +import ContactInfo from "./ContactInfo"; + +const meetings: { name: string; duration: string }[] = [ + { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, + { name: "Design Meeting", duration: "10:45 am - 11:45 am" }, + { name: "Customer Meeting", duration: "10:45 am - 11:45 am" }, + { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, + { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" }, +]; + +interface Props { + contactInfo: ContactInfo; +} + +const LowerBody: React.FC = () => { + return ( + + + Upcoming meetings + + + {meetings.map((meeting, i) => ( + + {meeting.name} + {meeting.duration} + + ))} + + + ); +}; + +export default LowerBody; diff --git a/src/components/contacts/Sidebar.tsx b/src/components/contacts/Sidebar.tsx new file mode 100644 index 0000000..8253a0e --- /dev/null +++ b/src/components/contacts/Sidebar.tsx @@ -0,0 +1,86 @@ +import { + Collapse, + Divider, + Drawer, + List, + ListItemButton, + ListItemText, + Toolbar, +} from "@mui/material"; +import React from "react"; +import { ExpandLess, ExpandMore } from "@mui/icons-material"; +import ContactInfo from "./ContactInfo"; +import Status from "./Status"; +import ContactItem from "./ContactItem"; + +const contacts: ContactInfo[] = [ + { name: "Taehee ...", status: Status.Online }, + { name: "Jincheng ...", status: Status.Offline }, + { name: "Mathew ...", status: Status.InMeeting }, + { name: "Esteban ...", status: Status.Away }, +]; + +interface Props { + setContactSelected: (contactInfo: ContactInfo) => void; +} + +const sidebarWidth = 240; + +const Sidebar: React.FC = (props) => { + const [favoritesOpen, setFavoritesOpen] = React.useState(true); + const [teamOpen, setTeamOpen] = React.useState(false); + + return ( + + + + + + setFavoritesOpen(!favoritesOpen)}> + {favoritesOpen ? : } + + + + + + {contacts.map((contact, i) => ( + + ))} + + + setTeamOpen(!teamOpen)}> + {teamOpen ? : } + + + + + + {contacts.map((contact, i) => ( + + ))} + + + + + ); +}; + +export default Sidebar; diff --git a/src/components/contacts/Status.tsx b/src/components/contacts/Status.tsx new file mode 100644 index 0000000..be69dbd --- /dev/null +++ b/src/components/contacts/Status.tsx @@ -0,0 +1,8 @@ +enum Status { + Online = "Online", + Offline = "Offline", + Away = "Away", + InMeeting = "In Meeting", +} + +export default Status; diff --git a/src/components/contacts/UpperBody.tsx b/src/components/contacts/UpperBody.tsx new file mode 100644 index 0000000..0c53c2a --- /dev/null +++ b/src/components/contacts/UpperBody.tsx @@ -0,0 +1,70 @@ +import { Box, Button, IconButton, Typography } from "@mui/material"; +import React from "react"; +import PhoneIcon from "@mui/icons-material/Phone"; +import VideocamIcon from "@mui/icons-material/Videocam"; +import GroupsIcon from "@mui/icons-material/Groups"; +import ContactInfo from "./ContactInfo"; + +interface Props { + contactInfo: ContactInfo; +} + +const UpperBody: React.FC = (props) => { + return ( + + + {props.contactInfo.name} + + + + + + + + + + + + + + + + {props.contactInfo.status} + MeetingName-1372 + + + + ); +}; + +export default UpperBody; diff --git a/src/components/contacts/Utils.tsx b/src/components/contacts/Utils.tsx new file mode 100644 index 0000000..e5424d8 --- /dev/null +++ b/src/components/contacts/Utils.tsx @@ -0,0 +1,18 @@ +import Status from "./Status"; + +const returnStatusColor = ( + status: Status +): "success" | "disabled" | "warning" | "error" => { + switch (status) { + case Status.Online: + return "success"; + case Status.Offline: + return "disabled"; + case Status.Away: + return "warning"; + case Status.InMeeting: + return "error"; + } +}; + +export { returnStatusColor }; diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index 3c12ed9..6c1c0a7 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -3,7 +3,7 @@ import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material"; import { Link } from "react-router-dom"; import Clock from "./Clock"; -import pngLogo from "../../assets/logo-png.png"; +import hsbcLogo from "../../assets/logo-png.png"; import { Page } from "./Page"; const pages: Page[] = [ @@ -14,15 +14,18 @@ const pages: Page[] = [ const Navbar: React.FC = () => { return ( - - + theme.zIndex.drawer + 1 }} + > + - Kitty Katty! + HSBC Logo {pages.map((page, i) => ( - +