React MUI

├── .gitignore ├── package-lock.json ├── public ├── favicon.ico ├── images │ ├── mu5.png │ └── paella.jpg ├── index.html ├── logo.png ├── logo192.png ├── logo512.png └── manifest.json ├── showcase ├── shot1.png ├── shot2.png ├── shot3.png └── shot4.png └── src ├── App.js ├── assets ├── about01.png ├── about02.png ├── about03.png ├── about04.png ├── adidas.png ├── amazon.png ├── api.png ├── asus.png ├── bgIMG.png ├── bgWhite.png ├── bolt.png ├── circle.svg ├── cpp.png ├── css.png ├── email.png ├── figma.png ├── flutter.png ├── git.png ├── graphql.png ├── html.png ├── javascript.png ├── logo.png ├── logoa.png ├── mobile.png ├── mu5.png ├── my_avater-removebg-preview (copy).png ├── my_avater.png ├── nb.png ├── node.png ├── old_logos │ ├── logo.png │ ├── logo2.png │ └── logo_staging.png ├── profile.png ├── python.png ├── react.png ├── redux.png ├── sass.png ├── skype.png ├── spotify.png ├── typescript.png └── vue.png ├── components ├── Feed.jsx ├── Navbar.jsx ├── Rightbar.jsx ├── Sidebar.jsx └── widgets │ ├── MyFab.jsx │ └── Post.jsx ├── constants ├── images.js └── index.js ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/favicon.ico -------------------------------------------------------------------------------- /public/images/mu5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/images/mu5.png -------------------------------------------------------------------------------- /public/images/paella.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/images/paella.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 25 | React MUI 26 | 27 | 28 | 29 |

30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /showcase/shot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/showcase/shot1.png -------------------------------------------------------------------------------- /showcase/shot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/showcase/shot2.png -------------------------------------------------------------------------------- /showcase/shot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/showcase/shot3.png -------------------------------------------------------------------------------- /showcase/shot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/showcase/shot4.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/about01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/about01.png -------------------------------------------------------------------------------- /src/assets/about02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/about02.png -------------------------------------------------------------------------------- /src/assets/about03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/about03.png -------------------------------------------------------------------------------- /src/assets/about04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/about04.png -------------------------------------------------------------------------------- /src/assets/adidas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/adidas.png -------------------------------------------------------------------------------- /src/assets/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/amazon.png -------------------------------------------------------------------------------- /src/assets/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/api.png -------------------------------------------------------------------------------- /src/assets/asus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/asus.png -------------------------------------------------------------------------------- /src/assets/bgIMG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/bgIMG.png -------------------------------------------------------------------------------- /src/assets/bgWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/bgWhite.png -------------------------------------------------------------------------------- /src/assets/bolt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/bolt.png -------------------------------------------------------------------------------- /src/assets/circle.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/assets/cpp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/cpp.png -------------------------------------------------------------------------------- /src/assets/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/css.png -------------------------------------------------------------------------------- /src/assets/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/email.png -------------------------------------------------------------------------------- /src/assets/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/figma.png -------------------------------------------------------------------------------- /src/assets/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/flutter.png -------------------------------------------------------------------------------- /src/assets/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/git.png -------------------------------------------------------------------------------- /src/assets/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/graphql.png -------------------------------------------------------------------------------- /src/assets/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/html.png -------------------------------------------------------------------------------- /src/assets/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/javascript.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logoa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/logoa.png -------------------------------------------------------------------------------- /src/assets/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/mobile.png -------------------------------------------------------------------------------- /src/assets/mu5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/mu5.png -------------------------------------------------------------------------------- /src/assets/my_avater-removebg-preview (copy).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/my_avater-removebg-preview (copy).png -------------------------------------------------------------------------------- /src/assets/my_avater.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/my_avater.png -------------------------------------------------------------------------------- /src/assets/nb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/nb.png -------------------------------------------------------------------------------- /src/assets/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/node.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/old_logos/logo.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/old_logos/logo2.png -------------------------------------------------------------------------------- /src/assets/old_logos/logo_staging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/old_logos/logo_staging.png -------------------------------------------------------------------------------- /src/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/profile.png -------------------------------------------------------------------------------- /src/assets/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/python.png -------------------------------------------------------------------------------- /src/assets/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/react.png -------------------------------------------------------------------------------- /src/assets/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/redux.png -------------------------------------------------------------------------------- /src/assets/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/sass.png -------------------------------------------------------------------------------- /src/assets/skype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/skype.png -------------------------------------------------------------------------------- /src/assets/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/spotify.png -------------------------------------------------------------------------------- /src/assets/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/typescript.png -------------------------------------------------------------------------------- /src/assets/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gangludev/react-mui-dashboard/f79bc7f7b767f2da2e0e90b3de92799b9e1b3b32/src/assets/vue.png -------------------------------------------------------------------------------- /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/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 |               
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 | 


--------------------------------------------------------------------------------
/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/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/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/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/constants/index.js:
--------------------------------------------------------------------------------
1 | export { default as images } from "./images"
2 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------