├── .gitignore ├── src ├── constants │ ├── index.js │ └── images.js ├── assets │ ├── api.png │ ├── cpp.png │ ├── css.png │ ├── git.png │ ├── mu5.png │ ├── nb.png │ ├── vue.png │ ├── asus.png │ ├── bgIMG.png │ ├── bolt.png │ ├── email.png │ ├── figma.png │ ├── html.png │ ├── logo.png │ ├── logoa.png │ ├── node.png │ ├── react.png │ ├── redux.png │ ├── sass.png │ ├── skype.png │ ├── about01.png │ ├── about02.png │ ├── about03.png │ ├── about04.png │ ├── adidas.png │ ├── amazon.png │ ├── bgWhite.png │ ├── flutter.png │ ├── graphql.png │ ├── mobile.png │ ├── profile.png │ ├── python.png │ ├── spotify.png │ ├── javascript.png │ ├── my_avater.png │ ├── typescript.png │ ├── old_logos │ │ ├── logo.png │ │ ├── logo2.png │ │ └── logo_staging.png │ ├── my_avater-removebg-preview (copy).png │ └── circle.svg ├── index.js ├── index.css ├── App.js └── components │ ├── Feed.jsx │ ├── Sidebar.jsx │ ├── widgets │ ├── Post.jsx │ └── MyFab.jsx │ ├── Navbar.jsx │ └── Rightbar.jsx ├── public ├── logo.png ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── mu5.png │ └── paella.jpg ├── manifest.json └── index.html └── showcase ├── shot1.png ├── shot2.png ├── shot3.png └── shot4.png /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | export { default as images } from "./images" 2 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/logo512.png -------------------------------------------------------------------------------- /showcase/shot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/showcase/shot1.png -------------------------------------------------------------------------------- /showcase/shot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/showcase/shot2.png -------------------------------------------------------------------------------- /showcase/shot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/showcase/shot3.png -------------------------------------------------------------------------------- /showcase/shot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/showcase/shot4.png -------------------------------------------------------------------------------- /src/assets/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/api.png -------------------------------------------------------------------------------- /src/assets/cpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/cpp.png -------------------------------------------------------------------------------- /src/assets/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/css.png -------------------------------------------------------------------------------- /src/assets/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/git.png -------------------------------------------------------------------------------- /src/assets/mu5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/mu5.png -------------------------------------------------------------------------------- /src/assets/nb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/nb.png -------------------------------------------------------------------------------- /src/assets/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/vue.png -------------------------------------------------------------------------------- /src/assets/asus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/asus.png -------------------------------------------------------------------------------- /src/assets/bgIMG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/bgIMG.png -------------------------------------------------------------------------------- /src/assets/bolt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/bolt.png -------------------------------------------------------------------------------- /src/assets/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/email.png -------------------------------------------------------------------------------- /src/assets/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/figma.png -------------------------------------------------------------------------------- /src/assets/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/html.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logoa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/logoa.png -------------------------------------------------------------------------------- /src/assets/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/node.png -------------------------------------------------------------------------------- /src/assets/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/react.png -------------------------------------------------------------------------------- /src/assets/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/redux.png -------------------------------------------------------------------------------- /src/assets/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/sass.png -------------------------------------------------------------------------------- /src/assets/skype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/skype.png -------------------------------------------------------------------------------- /public/images/mu5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/images/mu5.png -------------------------------------------------------------------------------- /src/assets/about01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/about01.png -------------------------------------------------------------------------------- /src/assets/about02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/about02.png -------------------------------------------------------------------------------- /src/assets/about03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/about03.png -------------------------------------------------------------------------------- /src/assets/about04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/about04.png -------------------------------------------------------------------------------- /src/assets/adidas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/adidas.png -------------------------------------------------------------------------------- /src/assets/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/amazon.png -------------------------------------------------------------------------------- /src/assets/bgWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/bgWhite.png -------------------------------------------------------------------------------- /src/assets/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/flutter.png -------------------------------------------------------------------------------- /src/assets/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/graphql.png -------------------------------------------------------------------------------- /src/assets/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/mobile.png -------------------------------------------------------------------------------- /src/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/profile.png -------------------------------------------------------------------------------- /src/assets/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/python.png -------------------------------------------------------------------------------- /src/assets/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/spotify.png -------------------------------------------------------------------------------- /public/images/paella.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/public/images/paella.jpg -------------------------------------------------------------------------------- /src/assets/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/javascript.png -------------------------------------------------------------------------------- /src/assets/my_avater.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/my_avater.png -------------------------------------------------------------------------------- /src/assets/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/typescript.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/old_logos/logo.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/old_logos/logo2.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo_staging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/old_logos/logo_staging.png -------------------------------------------------------------------------------- /src/assets/my_avater-removebg-preview (copy).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koatane-dev/react-mui-dashboard/HEAD/src/assets/my_avater-removebg-preview (copy).png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom/client" 3 | 4 | import App from "./App" 5 | import "./index.css" 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")) 8 | 9 | root.render() 10 | -------------------------------------------------------------------------------- /src/assets/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700&display=swap"); 2 | 3 | /* :root { 4 | --font-base: "DM Sans", sans-serif; 5 | 6 | --primary-color: #edf2f8; 7 | --secondary-color: #313bac; 8 | --black-color: #030303; 9 | --lightGray-color: #e4e4e4; 10 | --gray-color: #6b7688; 11 | --brown-color: #46364a; 12 | --white-color: #ffffff; 13 | } */ 14 | 15 | * { 16 | font-family: 'Roboto', sans-serif; 17 | box-sizing: border-box; 18 | padding: 0; 19 | margin: 0; 20 | scroll-behavior: smooth; 21 | } 22 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import Navbar from "./components/Navbar" 3 | import Sidebar from "./components/Sidebar" 4 | import Feed from "./components/Feed" 5 | import Rightbar from "./components/Rightbar" 6 | import MyFab from "./components/widgets/MyFab" 7 | 8 | //mui stuff 9 | 10 | import { createTheme, Stack, Box, ThemeProvider } from "@mui/material" 11 | 12 | const App = () => { 13 | const [mode, setMode] = useState("light") 14 | const toogleThemeMode = () => setMode(mode === "light" ? "dark" : "light") 15 | 16 | const theme = createTheme({ 17 | palette: { 18 | mode, 19 | }, 20 | }) 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 25 | React MUI 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/Feed.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Box from "@mui/material/Box" 3 | 4 | import Post from "./widgets/Post" 5 | import { images } from "../constants" 6 | 7 | const Feed = () => { 8 | const posts = [ 9 | { 10 | avatar: "/logo.png", 11 | username: "John Daniels", 12 | createdAt: "Tuesday 30, 2022", 13 | image: "/images/paella.jpg", 14 | body: `This impressive paella is a perfect party dish and a fun meal to cook 15 | together with your guests. Add 1 cup of frozen peas along with the 16 | mussels, if you like.`, 17 | _id: 0, 18 | }, 19 | { 20 | avatar: "", 21 | username: "Godwin Daniel", 22 | createdAt: "Tuesday 29, 2022", 23 | image: images.about02, 24 | body: `This impressive paella is a perfect party dish and a fun meal to cook 25 | together with your guests. Add 1 cup of frozen peas along with the 26 | mussels, if you like.`, 27 | _id: 0, 28 | }, 29 | { 30 | avatar: "", 31 | username: "John Daniels", 32 | createdAt: "Tuesday, 30 2022", 33 | image: images.about03, 34 | body: `This impressive paella is a perfect party dish and a fun meal to cook 35 | together with your guests. Add 1 cup of frozen peas along with the 36 | mussels, if you like.`, 37 | _id: 0, 38 | }, 39 | { 40 | avatar: "", 41 | username: "John Daniels", 42 | createdAt: "Tuesday, 30 2022", 43 | image: images.about04, 44 | body: `This impressive paella is a perfect party dish and a fun meal to cook 45 | together with your guests. Add 1 cup of frozen peas along with the 46 | mussels, if you like.`, 47 | _id: 0, 48 | }, 49 | ] 50 | 51 | return ( 52 | 53 | {posts.map((post, index) => ( 54 | 55 | ))} 56 | 57 | ) 58 | } 59 | 60 | export default Feed 61 | -------------------------------------------------------------------------------- /src/components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import { 4 | Box, 5 | List, 6 | ListItem, 7 | ListItemButton, 8 | ListItemIcon, 9 | ListItemText, 10 | Switch, 11 | } from "@mui/material" 12 | 13 | import { 14 | Person, 15 | Home, 16 | Pages, 17 | Groups, 18 | AccountBox, 19 | Storefront, 20 | Settings, 21 | ModeNight, 22 | LightMode, 23 | } from "@mui/icons-material" 24 | import { red } from "@mui/material/colors" 25 | 26 | const Sidebar = ({ toogleThemeMode, themeMode }) => { 27 | let links = [ 28 | { icon: , title: "Homepage" }, 29 | { icon: , title: "Pages" }, 30 | { icon: , title: "Groups" }, 31 | { icon: , title: "MarketPlace" }, 32 | { icon: , title: "Friends" }, 33 | { icon: , title: "Settings" }, 34 | { icon: , title: "Profile" }, 35 | ] 36 | 37 | return ( 38 | 44 | 45 | 46 | {links.map(({ title, icon }, index) => ( 47 | 48 | 49 | {icon} 50 | 51 | 52 | 53 | ))} 54 | 55 | {/* THEME MODE TOGGLER */} 56 | 57 | 58 | 59 | {themeMode === "dark" ? : } 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | ) 68 | } 69 | 70 | export default Sidebar 71 | -------------------------------------------------------------------------------- /src/constants/images.js: -------------------------------------------------------------------------------- 1 | import email from "../assets/email.png" 2 | import mobile from "../assets/mobile.png" 3 | // frameworks and tools 4 | import api from "../assets/api.png" 5 | import cpp from "../assets/cpp.png" 6 | import css from "../assets/css.png" 7 | import figma from "../assets/figma.png" 8 | import flutter from "../assets/flutter.png" 9 | import git from "../assets/git.png" 10 | import graphql from "../assets/graphql.png" 11 | import html from "../assets/html.png" 12 | import javascript from "../assets/javascript.png" 13 | import mu5 from "../assets/mu5.png" 14 | import node from "../assets/node.png" 15 | import python from "../assets/python.png" 16 | import react from "../assets/react.png" 17 | import redux from "../assets/redux.png" 18 | import sass from "../assets/sass.png" 19 | import typescript from "../assets/typescript.png" 20 | import vue from "../assets/vue.png" 21 | 22 | // section 23 | import about01 from "../assets/about01.png" 24 | import about02 from "../assets/about02.png" 25 | import about03 from "../assets/about03.png" 26 | import about04 from "../assets/about04.png" 27 | 28 | // mystuff 29 | import profile from "../assets/profile.png" 30 | import circle from "../assets/circle.svg" 31 | import logo from "../assets/logo.png" 32 | 33 | // company logos 34 | import adidas from "../assets/adidas.png" 35 | import amazon from "../assets/amazon.png" 36 | import asus from "../assets/asus.png" 37 | import bolt from "../assets/bolt.png" 38 | import nb from "../assets/nb.png" 39 | import skype from "../assets/skype.png" 40 | import spotify from "../assets/spotify.png" 41 | 42 | const images = { 43 | email, 44 | mobile, 45 | api, 46 | cpp, 47 | css, 48 | figma, 49 | flutter, 50 | git, 51 | graphql, 52 | html, 53 | javascript, 54 | mu5, 55 | node, 56 | python, 57 | react, 58 | redux, 59 | sass, 60 | typescript, 61 | vue, 62 | about01, 63 | about02, 64 | about03, 65 | about04, 66 | profile, 67 | circle, 68 | logo, 69 | adidas, 70 | amazon, 71 | asus, 72 | bolt, 73 | nb, 74 | skype, 75 | spotify, 76 | } 77 | 78 | export default images 79 | -------------------------------------------------------------------------------- /src/components/widgets/Post.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { styled } from "@mui/material/styles" 3 | 4 | import { 5 | Card, 6 | CardHeader, 7 | CardMedia, 8 | CardContent, 9 | CardActions, 10 | Avatar, 11 | IconButton, 12 | Typography, 13 | ShareIcon, 14 | Checkbox, 15 | } from "@mui/material" 16 | 17 | import { red } from "@mui/material/colors" 18 | 19 | import { FavoriteBorder, Share, Favorite, MoreVert } from "@mui/icons-material" 20 | 21 | const ExpandMore = styled((props) => { 22 | const { expand, ...other } = props 23 | return 24 | })(({ theme, expand }) => ({ 25 | transform: !expand ? "rotate(0deg)" : "rotate(180deg)", 26 | marginLeft: "auto", 27 | transition: theme.transitions.create("transform", { 28 | duration: theme.transitions.duration.shortest, 29 | }), 30 | })) 31 | 32 | export default function Post({ post }) { 33 | const { avatar, username, createdAt, image, body, _id } = post 34 | 35 | return ( 36 | 37 | 44 | {username[0]} 45 | 46 | } 47 | action={ 48 | 49 | 50 | 51 | } 52 | title={username} 53 | subheader={createdAt} 54 | /> 55 | 63 | 64 | 65 | {body} 66 | 67 | 68 | 69 | } 71 | checkedIcon={} 72 | /> 73 | 74 | 75 | 76 | 77 | 78 | ) 79 | } 80 | -------------------------------------------------------------------------------- /src/components/widgets/MyFab.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import { 3 | Tooltip, 4 | IconButton, 5 | Fab, 6 | Typography, 7 | Modal, 8 | Box, 9 | styled, 10 | Avatar, 11 | TextField, 12 | Stack, 13 | ButtonGroup, 14 | Button, 15 | } from "@mui/material" 16 | 17 | import { 18 | Add, 19 | EmojiEmotions, 20 | Image, 21 | VideoCameraBack, 22 | PersonAdd, 23 | DateRange, 24 | } from "@mui/icons-material" 25 | 26 | const MyModal = styled(Modal)({ 27 | display: "flex", 28 | alignItems: "center", 29 | justifyContent: "center", 30 | }) 31 | 32 | const UserBox = styled(Box)({ 33 | display: "flex", 34 | alignItems: "center", 35 | gap: "10px", 36 | marginBottom: "20px", 37 | }) 38 | 39 | const MyFab = () => { 40 | const [open, setOpen] = useState(false) 41 | 42 | const openMenu = () => setOpen(true) 43 | const closeMenu = () => setOpen(false) 44 | 45 | return ( 46 | <> 47 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 71 | 72 | Create post 73 | 74 | 75 | 76 | JD 77 | 78 | 79 | John Daniels 80 | 81 | 82 | 83 | {/* form */} 84 | 85 | 96 | 97 | {/* post actions*/} 98 | 99 | {[ 100 | , 101 | , 102 | , 103 | , 104 | ].map((icon, index) => ( 105 | {icon} 106 | ))} 107 | 108 | 109 | 116 | 117 | 120 | 121 | 122 | 123 | 124 | ) 125 | } 126 | 127 | export default MyFab 128 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | 3 | import { Mail, Code, Notifications } from "@mui/icons-material" 4 | import { 5 | AppBar, 6 | Toolbar, 7 | styled, 8 | Typography, 9 | Box, 10 | InputBase, 11 | Badge, 12 | IconButton, 13 | Avatar, 14 | Menu, 15 | MenuItem, 16 | menuItemClasses, 17 | } from "@mui/material" 18 | 19 | const StyledToolbar = styled(Toolbar)({ 20 | display: "flex", 21 | justifyContent: "space-between", 22 | }) 23 | 24 | const SearchBar = styled("div")(({ theme }) => ({ 25 | backgroundColor: "rgba(0,0,0,0.2)", 26 | padding: "0 10px", 27 | borderRadius: theme.shape.borderRadius, 28 | width: "40%", 29 | })) 30 | 31 | const Actions = styled(Box)(({ theme }) => ({ 32 | display: "none", 33 | alignItems: "center", 34 | gap: "0.2px", 35 | [theme.breakpoints.up("sm")]: { 36 | display: "flex", 37 | }, 38 | })) 39 | 40 | const UserBox = styled(Box)(({ theme }) => ({ 41 | display: "flex", 42 | alignItems: "center", 43 | gap: "10px", 44 | [theme.breakpoints.up("sm")]: { 45 | display: "none", 46 | }, 47 | })) 48 | 49 | const Navbar = () => { 50 | const [open, setOpen] = useState(false) 51 | 52 | const openMenu = () => setOpen(true) 53 | const closeMenu = () => setOpen(false) 54 | 55 | return ( 56 | 57 | 58 | {/* brandname */} 59 | 64 | {""} 65 | 66 | 67 | 68 | {/* searchbar */} 69 | 70 | 71 | 72 | 73 | {/* actions */} 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 91 | 92 | 93 | {/* mobile actions (hidden for desktop) */} 94 | 95 | 99 | John 100 | 101 | 113 | Profile 114 | My account 115 | Logout 116 | 117 | 118 | 119 | 120 | ) 121 | } 122 | 123 | export default Navbar 124 | -------------------------------------------------------------------------------- /src/components/Rightbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { 3 | Box, 4 | Typography, 5 | Avatar, 6 | AvatarGroup, 7 | ImageList, 8 | ImageListItem, 9 | styled, 10 | ListItem, 11 | ListItemText, 12 | ListItemAvatar, 13 | Divider, 14 | } from "@mui/material" 15 | 16 | const Rightbar = () => { 17 | return ( 18 | 19 | 20 | 21 | Online Freinds 22 | 23 | 24 | 25 | 29 | 33 | 37 | 41 | 45 | 46 | 47 | {/* latest photos */} 48 | 53 | Latest Photos 54 | 55 | 56 | 57 | {/*Latest conversations */} 58 | 59 | Latest Conversations 60 | 61 | 62 | {[ 63 | { 64 | username: "Godwin Daniels", 65 | body: "Do you have Paris recommendations? Have you ever...", 66 | createdAt: Date.now(), 67 | avatar: "", 68 | }, 69 | { 70 | username: "TobiTheAlpha", 71 | body: "Bruv, you won't believe how many users joined our waitlist in the past 2 days", 72 | createdAt: Date.now(), 73 | avatar: "", 74 | }, 75 | { 76 | username: "Mercy", 77 | body: "Are your up for bungle jumping this weekend", 78 | createdAt: Date.now(), 79 | avatar: "", 80 | }, 81 | ].map((message, index) => ( 82 | 83 | ))} 84 | 85 | 86 | ) 87 | } 88 | 89 | function srcset(image, size, rows = 1, cols = 1) { 90 | return { 91 | src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`, 92 | srcSet: `${image}?w=${size * cols}&h=${ 93 | size * rows 94 | }&fit=crop&auto=format&dpr=2 2x`, 95 | } 96 | } 97 | 98 | function LatestPhotos() { 99 | return ( 100 | 106 | {itemData.map( 107 | (item, index) => 108 | index < 4 && ( 109 | 114 | {item.title} 119 | 120 | ) 121 | )} 122 | 123 | ) 124 | } 125 | 126 | const itemData = [ 127 | { 128 | img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e", 129 | title: "Breakfast", 130 | rows: 2, 131 | cols: 2, 132 | }, 133 | { 134 | img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d", 135 | title: "Burger", 136 | }, 137 | { 138 | img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45", 139 | title: "Camera", 140 | }, 141 | { 142 | img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c", 143 | title: "Coffee", 144 | cols: 2, 145 | }, 146 | { 147 | img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8", 148 | title: "Hats", 149 | cols: 2, 150 | }, 151 | { 152 | img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62", 153 | title: "Honey", 154 | author: "@arwinneil", 155 | rows: 2, 156 | cols: 2, 157 | }, 158 | { 159 | img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6", 160 | title: "Basketball", 161 | }, 162 | { 163 | img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f", 164 | title: "Fern", 165 | }, 166 | { 167 | img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25", 168 | title: "Mushrooms", 169 | rows: 2, 170 | cols: 2, 171 | }, 172 | { 173 | img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af", 174 | title: "Tomato basil", 175 | }, 176 | { 177 | img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1", 178 | title: "Sea star", 179 | }, 180 | { 181 | img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6", 182 | title: "Bike", 183 | cols: 2, 184 | }, 185 | ] 186 | 187 | const Conversation = ({ message: { avater, username, body, createdAt } }) => ( 188 | <> 189 | 190 | 191 | 192 | {username[0]} 193 | 194 | 195 | 199 | 205 | {username} 206 | 207 | {" - " + body} 208 | 209 | } 210 | /> 211 | 212 | 213 | 214 | ) 215 | 216 | export default Rightbar 217 | --------------------------------------------------------------------------------