├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── public ├── 1.webp ├── 2.webp ├── 3.webp ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt ├── shoe.png ├── shoe1.png ├── shoe2.png ├── shoe3.png └── shoe4.png ├── src ├── App.js ├── App.test.js ├── assets │ └── Archia-Regular.otf ├── components │ ├── Accordion │ │ └── index.js │ ├── Carousel │ │ └── index.js │ ├── ContextMenu │ │ └── index.js │ ├── HamBurger │ │ └── index.js │ ├── HamBurgerDropdown │ │ └── index.js │ ├── IconWithTooltips │ │ └── index.jsx │ ├── NavBar │ │ └── index.jsx │ ├── RadioButton │ │ └── index.js │ ├── Slider │ │ └── index.js │ ├── ToggleButton │ │ └── index.js │ └── index.js ├── constant │ ├── contextMenuOption.js │ ├── index.js │ └── svgs.js ├── index.css └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .yarn 2 | .next 3 | .npm 4 | dist 5 | node_modules 6 | build -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-components", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "gsap": "^3.11.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-icons": "^4.3.1", 13 | "react-scripts": "4.0.3", 14 | "react-spring": "^9.5.2", 15 | "react-spring-carousel": "^2.0.19", 16 | "smooth-scrollbar": "^8.8.1", 17 | "styled-components": "^5.3.3", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "prettier": "prettier --write ." 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "prettier": "^2.7.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/1.webp -------------------------------------------------------------------------------- /public/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/2.webp -------------------------------------------------------------------------------- /public/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/3.webp -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 24 | 28 | 29 | 38 | React Component 39 | 40 | 41 | 42 | 43 |
44 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/shoe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/shoe.png -------------------------------------------------------------------------------- /public/shoe1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/shoe1.png -------------------------------------------------------------------------------- /public/shoe2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/shoe2.png -------------------------------------------------------------------------------- /public/shoe3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/shoe3.png -------------------------------------------------------------------------------- /public/shoe4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/public/shoe4.png -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styled from 'styled-components'; 3 | import { 4 | BsPatchExclamation, 5 | BsTag, 6 | BsReceipt, 7 | BsShop, 8 | BsCalendarCheck, 9 | BsStickies, 10 | BsCheck2, 11 | BsCardList, 12 | BsChatSquareText, 13 | } from 'react-icons/bs'; 14 | import { IoSettingsOutline, IoChevronBackOutline } from 'react-icons/io5'; 15 | import { CgInfinity } from 'react-icons/cg'; 16 | 17 | const IconContainer = ({ children, isActive }) => { 18 | return {children}; 19 | }; 20 | 21 | const TextContainer = ({ children }) => { 22 | return {children}; 23 | }; 24 | 25 | const NotificationContainer = ({ color, notifiNumber }) => { 26 | return {notifiNumber}; 27 | }; 28 | 29 | const SingleTab = ({ item, isActive, isShrink, handleClick }) => { 30 | return ( 31 | 32 | {item.icon()} 33 | 34 | {item.name} 35 | {item.isNotifiTab && ( 36 | 40 | )} 41 | 42 | 43 | ); 44 | }; 45 | 46 | const SingleCollapsable = ({ item, isActive, isShrink, handleClick }) => { 47 | const [isOpen, setIsOpen] = useState(false); 48 | 49 | const handleClickFunction = () => { 50 | setIsOpen(!isOpen); 51 | handleClick(); 52 | }; 53 | 54 | return ( 55 |
56 | 57 | {item.icon()} 58 | 59 | {item.name} 60 | 61 | 62 | 63 | 64 | 65 | 66 | {item.subItems.map((o, idx) => ( 67 | 68 | 69 | 70 | 71 | 72 | {o.subName} 73 | {o.notifiNumber === 0 ? ( 74 | 75 | ) : ( 76 | {o.notifiNumber} 77 | )} 78 | 79 | 80 | ))} 81 | 82 |
83 | ); 84 | }; 85 | 86 | function App() { 87 | const [isShrinkView, setIsShrinkView] = useState(false); 88 | const [activeTab, setActiveTab] = useState(1); 89 | 90 | const TabList1 = [ 91 | { 92 | id: 1, 93 | name: 'Dashboard', 94 | isNotifiTab: false, 95 | icon: BsShop, 96 | }, 97 | { 98 | id: 2, 99 | name: 'Project Task', 100 | isNotifiTab: false, 101 | icon: BsCalendarCheck, 102 | }, 103 | { 104 | id: 3, 105 | name: 'Schedule', 106 | isNotifiTab: false, 107 | icon: BsReceipt, 108 | }, 109 | { 110 | id: 4, 111 | name: 'Document', 112 | isNotifiTab: true, 113 | icon: BsStickies, 114 | notifiNumber: 6, 115 | notifiColor: '#3D6ADA', 116 | }, 117 | { 118 | id: 5, 119 | name: 'Mention', 120 | isNotifiTab: true, 121 | icon: BsTag, 122 | notifiNumber: 2, 123 | notifiColor: '#F164C1', 124 | }, 125 | { 126 | id: 6, 127 | name: 'Files', 128 | isNotifiTab: true, 129 | icon: BsCardList, 130 | subItems: [ 131 | { 132 | id: 11, 133 | subName: 'Recent', 134 | notifiNumber: 8, 135 | }, 136 | { 137 | id: 22, 138 | subName: 'Sent', 139 | notifiNumber: 2, 140 | }, 141 | { 142 | id: 33, 143 | subName: 'Uploaded', 144 | notifiNumber: 0, 145 | }, 146 | { 147 | id: 44, 148 | subName: 'Draft', 149 | notifiNumber: 4, 150 | }, 151 | { 152 | id: 55, 153 | subName: 'Deleted', 154 | notifiNumber: 8, 155 | Icon: CgInfinity, 156 | }, 157 | ], 158 | }, 159 | { 160 | id: 7, 161 | name: 'Teams', 162 | isNotifiTab: false, 163 | icon: BsChatSquareText, 164 | }, 165 | ]; 166 | 167 | const TabList2 = [ 168 | { 169 | id: 8, 170 | name: 'Help', 171 | isNotifiTab: false, 172 | icon: BsPatchExclamation, 173 | }, 174 | { 175 | id: 9, 176 | name: 'Setting', 177 | isNotifiTab: false, 178 | icon: IoSettingsOutline, 179 | }, 180 | ]; 181 | 182 | const handleSidebarView = () => { 183 | setIsShrinkView(!isShrinkView); 184 | }; 185 | 186 | const handleActive = (id) => { 187 | setActiveTab(id); 188 | }; 189 | 190 | return ( 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | InfinitySpace 202 | 203 | 204 | 205 | 206 | {TabList1.map((o) => 207 | o.subItems ? ( 208 | handleActive(o.id)} 213 | /> 214 | ) : ( 215 | handleActive(o.id)} 220 | /> 221 | ) 222 | )} 223 | 224 | 225 | {TabList2.map((o) => 226 | o.subItems ? ( 227 | handleActive(o.id)} 232 | /> 233 | ) : ( 234 | handleActive(o.id)} 239 | /> 240 | ) 241 | )} 242 | 243 | 244 | 245 | 246 | ); 247 | } 248 | 249 | export default App; 250 | 251 | const AppContainer = styled.div` 252 | width: 100%; 253 | height: 100vh; 254 | display: grid; 255 | place-items: center; 256 | background-color: #fed2bd; 257 | `; 258 | 259 | const SideBarContainer = styled.div` 260 | position: relative; 261 | height: 80vh; 262 | background-color: #ffffff; 263 | box-sizing: border-box; 264 | padding: 15px; 265 | font-family: 'DM Sans', sans-serif; 266 | display: flex; 267 | flex-direction: column; 268 | transition: all 0.4s ease; 269 | width: ${({ isShrink }) => (isShrink ? '75px' : '280px')}; 270 | border-radius: ${({ isShrink }) => (isShrink ? '4px' : '8px')}; 271 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 272 | `; 273 | 274 | const SideBarButton = styled.button` 275 | cursor: pointer; 276 | background-color: #fff; 277 | border-radius: 50%; 278 | width: 20px; 279 | aspect-ratio: 1; 280 | display: grid; 281 | place-content: center; 282 | border: none; 283 | box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 284 | position: absolute; 285 | top: 4vh; 286 | right: -10px; 287 | transition: all 0.3s ease; 288 | 289 | transform: ${({ isShrink }) => 290 | isShrink ? 'rotate(180deg)' : 'rotate(0deg)'}; 291 | 292 | :hover { 293 | box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px; 294 | transition: all 0.3s ease; 295 | } 296 | `; 297 | const LogoWrapper = styled.div` 298 | display: grid; 299 | grid-template-columns: max-content auto; 300 | align-items: center; 301 | margin-bottom: 30px; 302 | column-gap: 0.75rem; 303 | overflow: hidden; 304 | padding: 0 2px; 305 | `; 306 | const Logo = styled.div` 307 | background-color: #000; 308 | border-radius: 12px; 309 | width: 40px; 310 | height: 40px; 311 | display: grid; 312 | place-items: center; 313 | padding: 5px; 314 | box-sizing: border-box; 315 | 316 | svg { 317 | width: 100%; 318 | height: 100%; 319 | color: #fff; 320 | } 321 | `; 322 | const LogoText = styled.div` 323 | font-size: 20px; 324 | opacity: ${({ isShrink }) => (isShrink ? '0' : '1')}; 325 | 326 | transition: all 0.3s ease; 327 | color: #000; 328 | span { 329 | font-weight: 600; 330 | } 331 | `; 332 | 333 | const SideTabWrapper = styled.div` 334 | flex: 1; 335 | display: flex; 336 | flex-direction: column; 337 | `; 338 | 339 | const TopWrapper = styled.div` 340 | flex: 1 1 auto; 341 | `; 342 | 343 | const BottomWrapper = styled.div` 344 | flex: 0 1 auto; 345 | `; 346 | 347 | const TabWrapper = styled.div` 348 | cursor: pointer; 349 | display: grid; 350 | grid-template-columns: max-content auto; 351 | 352 | column-gap: 0.75rem; 353 | padding: 0.75rem; 354 | border-radius: 8px; 355 | height: 20px; 356 | overflow: hidden; 357 | margin: 5px 0; 358 | 359 | background-color: ${({ isActive }) => (isActive ? '#EFEFEF' : 'transparent')}; 360 | color: ${({ isActive }) => (isActive ? '#000' : '#8b8d91')}; 361 | transition: all 0.3s ease; 362 | 363 | :hover { 364 | transition: all 0.3s ease; 365 | background-color: #efefef; 366 | } 367 | `; 368 | 369 | const IconWrap = styled.div` 370 | font-size: 1.25rem; 371 | aspect-ratio: 1; 372 | padding: 0; 373 | 374 | svg { 375 | transition: all 0.3s ease; 376 | color: ${({ isActive }) => (isActive ? '#000' : '#8b8d91')}; 377 | } 378 | `; 379 | 380 | const TabTextWrapper = styled.div` 381 | width: 100%; 382 | display: flex; 383 | opacity: ${({ isShrink }) => (isShrink ? '0' : '1')}; 384 | justify-content: space-between; 385 | transition: all 0.3s ease; 386 | white-space: nowrap; 387 | `; 388 | 389 | const Text = styled.div` 390 | font-size: 14px; 391 | font-weight: 500; 392 | `; 393 | 394 | const NotificationBox = styled.div` 395 | width: 20px; 396 | height: 20px; 397 | aspect-ratio: 1; 398 | font-size: 12px; 399 | border-radius: 6px; 400 | display: grid; 401 | place-items: center; 402 | font-weight: 600; 403 | background-color: ${({ color }) => color}; 404 | color: #fff; 405 | `; 406 | 407 | // for Second Part 408 | const RoundIconWrapper = styled.button` 409 | cursor: pointer; 410 | background-color: #fff; 411 | border-radius: 50%; 412 | width: 20px; 413 | height: 20px; 414 | display: grid; 415 | place-content: center; 416 | border: none; 417 | transition: all 0.3s ease; 418 | transform: ${({ isOpen }) => (isOpen ? 'rotate(-90deg)' : 'rotate(90deg)')}; 419 | box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, 420 | rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; 421 | `; 422 | const SubContentWrapper = styled.div` 423 | height: auto; 424 | max-height: ${({ isOpen }) => (isOpen ? '120px' : '0px')}; 425 | transition: all 0.3s ease; 426 | overflow: hidden; 427 | overflow-y: auto; 428 | -webkit-overflow-scrolling: touch; 429 | 430 | scrollbar-width: thin; 431 | scrollbar-color: #000; 432 | 433 | ::-webkit-scrollbar { 434 | width: 0px; 435 | } 436 | ::-webkit-scrollbar-track { 437 | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); 438 | } 439 | ::-webkit-scrollbar-thumb { 440 | background-color: #000; 441 | } 442 | `; 443 | const SubWrapper = styled.div` 444 | cursor: pointer; 445 | display: grid; 446 | grid-template-columns: max-content auto; 447 | align-items: center; 448 | 449 | column-gap: 0.75rem; 450 | padding: 0 0.85rem; 451 | height: 30px; 452 | `; 453 | const DotWrapper = styled.div` 454 | position: relative; 455 | height: 100%; 456 | width: 20px; 457 | display: flex; 458 | align-items: center; 459 | justify-content: flex-start; 460 | margin-left: 5px; 461 | 462 | :after { 463 | content: ''; 464 | height: 100%; 465 | background-color: #e7e7ea; 466 | width: 2px; 467 | 468 | position: absolute; 469 | top: 50%; 470 | left: 2px; 471 | display: ${({ isLast }) => (isLast ? 'none' : 'block')}; 472 | } 473 | `; 474 | const DotIcon = styled.span` 475 | width: 6px; 476 | height: 6px; 477 | background-color: #e7e7ea; 478 | border-radius: 50%; 479 | position: relative; 480 | `; 481 | const SubTextWrapper = styled.div` 482 | display: flex; 483 | justify-content: space-between; 484 | color: #8b8d91; 485 | font-weight: 500; 486 | opacity: ${({ isShrink }) => (isShrink ? '0' : '1')}; 487 | transition: all 0.3s ease; 488 | white-space: nowrap; 489 | 490 | :hover { 491 | color: #000; 492 | } 493 | 494 | span { 495 | font-size: 14px; 496 | width: 15px; 497 | } 498 | `; 499 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/Archia-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudhir9297/React-Components/fa1d905de37e4f8393e2c9d33736ae1939434947/src/assets/Archia-Regular.otf -------------------------------------------------------------------------------- /src/components/Accordion/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styled from 'styled-components'; 3 | import { IoChevronDown } from 'react-icons/io5'; 4 | 5 | function Accordion({ title, content }) { 6 | const [value, setValue] = useState(false); 7 | 8 | const handleClick = () => { 9 | setValue(!value); 10 | }; 11 | 12 | return ( 13 | 14 |
15 | {title} 16 | 17 | 18 | 19 |
20 | {content} 21 | 22 | ); 23 | } 24 | 25 | export default Accordion; 26 | 27 | const Container = styled.div` 28 | height: fit-content; 29 | width: 300px; 30 | border-radius: 4px; 31 | border: 1px solid #e1e5e9; 32 | color: #0a0a0a; 33 | background: #f0f4f7; 34 | margin: 5px 0; 35 | `; 36 | 37 | const Header = styled.div` 38 | height: 60px; 39 | width: 100%; 40 | max-height: ${({ value }) => (value ? '70px' : '50px')}; 41 | transition: max-height 0.25s ease-in-out; 42 | border-radius: 4px; 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | cursor: pointer; 47 | `; 48 | 49 | const Title = styled.div` 50 | padding-left: 15px; 51 | `; 52 | 53 | const Icon = styled.div` 54 | width: 20px; 55 | height: 20px; 56 | display: grid; 57 | place-items: center; 58 | padding: 8px 5px; 59 | margin-left: 15px; 60 | `; 61 | 62 | const Content = styled.div` 63 | width: 100%; 64 | height: 90px; 65 | max-height: ${({ value }) => (value ? '100px' : '0px')}; 66 | transition: max-height 0.25s ease-in-out; 67 | font-size: 14px; 68 | overflow: hidden; 69 | display: flex; 70 | align-items: center; 71 | border-top: 1px solid ${({ value }) => (value ? '#e1e5e9' : 'transparent')}; 72 | `; 73 | -------------------------------------------------------------------------------- /src/components/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import styled, { css } from 'styled-components'; 3 | import { useSpringCarousel } from 'react-spring-carousel'; 4 | 5 | function Carousel() { 6 | const [active, setActive] = useState(1); 7 | const [noOfItem, setNoOfItem] = useState(6); 8 | 9 | const List = [ 10 | { 11 | id: 1, 12 | title: 'Dracaena Trifasciata', 13 | image: 14 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/4.png', 15 | desc: 'One of the most effective houseplants in air purification.', 16 | }, 17 | { 18 | id: 2, 19 | title: 'Crassula Ovata', 20 | image: 21 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/3.png', 22 | desc: 'One of the most effective houseplants in air purification.', 23 | }, 24 | { 25 | id: 3, 26 | title: 'Browningia Hertlingiana', 27 | image: 28 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/1.png', 29 | desc: 'One of the most effective houseplants in air purification.', 30 | }, 31 | { 32 | id: 4, 33 | title: 'Haworthiopsis Attenuata ', 34 | image: 35 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/5.png', 36 | desc: 'One of the most effective houseplants in air purification.', 37 | }, 38 | { 39 | id: 5, 40 | title: 'Chlorophytum Comosum', 41 | image: 42 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/2.png', 43 | desc: 'One of the most effective houseplants in air purification.', 44 | }, 45 | { 46 | id: 6, 47 | title: 'Dracaena Trifasciata', 48 | image: 49 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/4.png', 50 | desc: 'One of the most effective houseplants in air purification.', 51 | }, 52 | { 53 | id: 7, 54 | title: 'Crassula Ovata', 55 | image: 56 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/3.png', 57 | desc: 'One of the most effective houseplants in air purification.', 58 | }, 59 | { 60 | id: 8, 61 | title: 'Browningia Hertlingiana', 62 | image: 63 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/1.png', 64 | desc: 'One of the most effective houseplants in air purification.', 65 | }, 66 | { 67 | id: 9, 68 | title: 'Haworthiopsis Attenuata ', 69 | image: 70 | 'https://default-vessel.s3.ap-south-1.amazonaws.com/avagam-bucket/5.png', 71 | desc: 'One of the most effective houseplants in air purification.', 72 | }, 73 | ]; 74 | 75 | const handleSize = (innerWidth) => { 76 | if (innerWidth < 599) { 77 | // mobile 78 | return setNoOfItem(3); 79 | } 80 | if (innerWidth < 899) { 81 | // tablet portrait 82 | return setNoOfItem(3); 83 | } 84 | if (innerWidth < 1199) { 85 | // tablet landscape 86 | return setNoOfItem(4); 87 | } 88 | return setNoOfItem(6); 89 | }; 90 | 91 | useEffect(() => { 92 | window.addEventListener('resize', (e) => handleSize(e.target.innerWidth)); 93 | return () => { 94 | window.removeEventListener('resize', (e) => 95 | handleSize(e.target.innerWidth) 96 | ); 97 | }; 98 | }); 99 | 100 | const { 101 | slideToNextItem, 102 | slideToPrevItem, 103 | carouselFragment, 104 | useListenToCustomEvent, 105 | } = useSpringCarousel({ 106 | itemsPerSlide: noOfItem, 107 | gutter: 20, 108 | withLoop: true, 109 | startEndGutter: 100, 110 | 111 | items: List.map((item) => ({ 112 | id: item.id, 113 | renderItem: ( 114 | 115 | 116 | 121 | 122 |

{item.title}

123 |
{item.desc}
124 | 125 | 126 | ), 127 | })), 128 | }); 129 | 130 | useListenToCustomEvent((event) => { 131 | if (event.eventName === 'onSlideStartChange') { 132 | setActive(event.nextItem.index + 1); 133 | } 134 | }); 135 | 136 | const onSliderHandle = (e) => { 137 | if (e.deltaY > 0) { 138 | slideToNextItem(); 139 | } else { 140 | slideToPrevItem(); 141 | } 142 | }; 143 | 144 | return ( 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | Go Green 159 | 160 | The world of plants 161 | 162 | Discover everything you need to know about your plants, treat them 163 | with kindness and they will take care of you. 164 | 165 | 166 | Our Favourite this week{' '} 167 | 168 | 169 | 170 | 171 | 172 | {carouselFragment} 173 | 174 | 175 | 176 | ); 177 | } 178 | 179 | export default Carousel; 180 | 181 | const Container = styled.div` 182 | height: 100vh; 183 | width: 100vw; 184 | margin: 0 auto; 185 | box-sizing: border-box; 186 | display: flex; 187 | flex-direction: column; 188 | justify-content: flex-start; 189 | align-items: center; 190 | background-color: #d9e5e4; 191 | overflow: hidden; 192 | `; 193 | 194 | const wrapperCommon = css` 195 | width: 100%; 196 | display: flex; 197 | justify-content: flex-end; 198 | `; 199 | 200 | const innerWrapperCommon = css` 201 | width: 75%; 202 | height: 100%; 203 | `; 204 | 205 | const HeaderWrapper = styled.div` 206 | ${wrapperCommon} 207 | height: 60px; 208 | `; 209 | 210 | const OptionWrapper = styled.div` 211 | ${innerWrapperCommon} 212 | display: flex; 213 | align-items: center; 214 | 215 | a { 216 | color: #1a2e35; 217 | text-decoration: none; 218 | } 219 | `; 220 | const Option = styled.div` 221 | margin: 1rem; 222 | padding: 1rem; 223 | color: #1a2e35; 224 | white-space: nowrap; 225 | :hover { 226 | cursor: pointer; 227 | color: #5e9270; 228 | } 229 | `; 230 | 231 | const ContentWrapper = styled.div` 232 | ${wrapperCommon} 233 | padding-top: 6rem; 234 | `; 235 | const InnerWrapper = styled.div` 236 | ${innerWrapperCommon} 237 | `; 238 | 239 | const Headtext = styled.div` 240 | font-size: 25px; 241 | color: #5e9270; 242 | `; 243 | 244 | const TextWrapper = styled.div` 245 | width: 80%; 246 | display: flex; 247 | align-items: center; 248 | padding: 2rem 0; 249 | margin-bottom: 30px; 250 | `; 251 | 252 | const BoldText = styled.div` 253 | font-size: 60px; 254 | font-weight: 600; 255 | color: #1a2e35; 256 | width: 30%; 257 | margin-right: 40px; 258 | line-height: 80px; 259 | `; 260 | 261 | const Text = styled.div` 262 | width: 30%; 263 | padding: 10px; 264 | font-size: 16px; 265 | `; 266 | 267 | const SliderWrapper = styled.div` 268 | height: 350px; 269 | width: 100%; 270 | display: flex; 271 | align-items: center; 272 | justify-content: center; 273 | `; 274 | 275 | const SliderContainer = styled.div` 276 | height: 100%; 277 | width: 100%; 278 | `; 279 | const CardBoxWrapper = styled.div` 280 | height: 100%; 281 | width: 100%; 282 | position: relative; 283 | display: flex; 284 | align-items: center; 285 | justify-content: center; 286 | 287 | transition: all 0.3s ease-in-out; 288 | transform-origin: bottom; 289 | transform: ${({ isActive }) => (isActive ? 'scale(1.2)' : 'scale(0.9)')}; 290 | `; 291 | 292 | const BackgroundCard = styled.div` 293 | background: #e8f0ef; 294 | height: 80%; 295 | width: 100%; 296 | position: absolute; 297 | bottom: 0; 298 | right: 0; 299 | 300 | border-radius: 15px; 301 | 302 | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; 303 | `; 304 | 305 | const Image = styled.img` 306 | width: 250px; 307 | height: auto; 308 | position: absolute; 309 | bottom: -10px; 310 | left: 0; 311 | user-select: none; 312 | transition: all 0.3s ease-in-out; 313 | transform-origin: bottom; 314 | transform: ${({ isActive }) => 315 | isActive ? 'scale(1.2) translateY(-40px)' : 'scale(1) translateY(0px)'}; 316 | `; 317 | 318 | const ItemText = styled.div` 319 | position: absolute; 320 | 321 | right: 20px; 322 | bottom: 20%; 323 | display: flex; 324 | flex-direction: column; 325 | width: 80%; 326 | user-select: none; 327 | 328 | h3 { 329 | font-weight: 600; 330 | font-size: 18px; 331 | } 332 | 333 | div { 334 | display: ${({ isActive }) => (isActive ? 'block' : 'none')}; 335 | font-size: 12px; 336 | } 337 | `; 338 | -------------------------------------------------------------------------------- /src/components/ContextMenu/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const ContextMenu = ({ x, y, contextItem, contextClicked }) => { 5 | return ( 6 | 7 | {contextItem.map((item, index) => ( 8 | contextClicked(item.label)}> 9 | {item.icon} 10 | {item.label} 11 | 12 | ))} 13 | 14 | ); 15 | }; 16 | 17 | export default ContextMenu; 18 | 19 | const ContextContainer = styled.div` 20 | position: absolute; 21 | width: 150px; 22 | height: fit-content; 23 | z-index: 10; 24 | background-color: #ffffff; 25 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 26 | rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 27 | 28 | border: 1px solid #f5f7fa; 29 | 30 | color: #0d1017; 31 | font-size: 18px; 32 | border-radius: 8px; 33 | left: ${(props) => props.x}; 34 | top: ${(props) => props.y}; 35 | `; 36 | 37 | const ContextMenuItem = styled.div` 38 | display: flex; 39 | align-items: center; 40 | padding: 10px 5px; 41 | `; 42 | 43 | const Icon = styled.div` 44 | margin: 0 5px; 45 | height: 100%; 46 | svg { 47 | width: 18px; 48 | height: 18px; 49 | fill: #0d1017; 50 | } 51 | `; 52 | 53 | const ContextMenuItemText = styled.div` 54 | padding-left: 6px; 55 | font-weight: 400; 56 | height: 100%; 57 | display: flex; 58 | align-items: center; 59 | `; 60 | -------------------------------------------------------------------------------- /src/components/HamBurger/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | function index({ value, handleClick }) { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default index; 15 | 16 | const Container = styled.div` 17 | width: 80px; 18 | height: 80px; 19 | border: 1px solid #e1e5e9; 20 | border-radius: 10px; 21 | background-color: #f0f4f7; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | position: relative; 26 | overflow: hidden; 27 | cursor: pointer; 28 | 29 | span { 30 | position: absolute; 31 | width: 60px; 32 | height: 8px; 33 | background-color: #3a7bec; 34 | border-radius: 4px; 35 | transition: 0.5s; 36 | } 37 | 38 | span:nth-child(1) { 39 | transform: ${({ value }) => 40 | value ? 'translateY(0px) rotate(45deg)' : 'translateY(-20px)'}; 41 | } 42 | span:nth-child(2) { 43 | transform: ${({ value }) => 44 | value ? 'translateX(80px)' : 'translateX(0px)'}; 45 | } 46 | span:nth-child(3) { 47 | transform: ${({ value }) => 48 | value ? 'translateY(0px) rotate(315deg)' : 'translateY(20px)'}; 49 | transition-delay: 0.15s; 50 | } 51 | `; 52 | -------------------------------------------------------------------------------- /src/components/HamBurgerDropdown/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import HamBurger from '../HamBurger'; 4 | import { FaUserCircle, FaSignOutAlt, FaCog } from 'react-icons/fa'; 5 | 6 | function HamBurgerDropDown({ value, handleClick }) { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Profile 16 | 17 | 18 | 19 | Setting 20 | 21 | 22 | 23 | logout 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | export default HamBurgerDropDown; 32 | 33 | const Container = styled.div` 34 | position: relative; 35 | `; 36 | 37 | const DropDown = styled.div` 38 | border-radius: 8px; 39 | border: ${({ value }) => (value ? '1px' : '0px')} solid #e1e5e9; 40 | width: 200px; 41 | height: fit-content; 42 | max-height: ${({ value }) => (value ? '200px' : '0px')}; 43 | background-color: #f0f4f7; 44 | overflow: hidden; 45 | transition: all 0.25s ease-in-out; 46 | `; 47 | 48 | const Item = styled.div` 49 | color: black; 50 | margin: 10px; 51 | font-weight: 600; 52 | font-size: 20px; 53 | 54 | :hover { 55 | color: #3a7bec; 56 | cursor: pointer; 57 | } 58 | `; 59 | 60 | const Wrapper = styled.div` 61 | position: absolute; 62 | top: 120px; 63 | `; 64 | const Arrow = styled.div` 65 | position: absolute; 66 | width: 0; 67 | height: 0; 68 | top: -15px; 69 | left: 20px; 70 | border-left: 20px solid transparent; 71 | border-right: 20px solid transparent; 72 | border-bottom: 20px solid #f0f4f7; 73 | opacity: ${({ value }) => (value ? 1 : 0)}; 74 | transition: all 0.25s ease-in-out; 75 | `; 76 | -------------------------------------------------------------------------------- /src/components/IconWithTooltips/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const IconWithToolTip = ({ children, hoverColor, tooltip }) => { 5 | return ( 6 | 7 | {tooltip} 8 | {children} 9 | 10 | ); 11 | }; 12 | 13 | export default IconWithToolTip; 14 | 15 | const IconWrapper = styled.div` 16 | position: relative; 17 | width: 30px; 18 | height: 30px; 19 | background: #ffffff; 20 | border-radius: 50%; 21 | padding: 15px; 22 | margin: 10px; 23 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 24 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 25 | cursor: pointer; 26 | 27 | display: flex; 28 | justify-content: center; 29 | 30 | :hover { 31 | background-color: ${({ hoverColor }) => hoverColor}; 32 | 33 | svg { 34 | fill: #fff; 35 | } 36 | .tooltip { 37 | opacity: 1; 38 | top: -45px; 39 | background: ${({ hoverColor }) => hoverColor}; 40 | color: #ffffff; 41 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 42 | 43 | ::before { 44 | background: ${({ hoverColor }) => hoverColor}; 45 | } 46 | } 47 | } 48 | `; 49 | 50 | const Tooltips = styled.div` 51 | position: absolute; 52 | 53 | top: 0px; 54 | font-size: 14px; 55 | background: #ffffff; 56 | color: #000000; 57 | padding: 6px 8px; 58 | border-radius: 5px; 59 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 60 | pointer-events: none; 61 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 62 | opacity: 0; 63 | 64 | ::before { 65 | position: absolute; 66 | content: ''; 67 | height: 8px; 68 | width: 8px; 69 | background: #ffffff; 70 | bottom: -3px; 71 | left: 50%; 72 | transform: translate(-50%) rotate(45deg); 73 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 74 | } 75 | `; 76 | 77 | const Icon = styled.div` 78 | width: 100%; 79 | height: 100%; 80 | display: flex; 81 | align-items: center; 82 | justify-content: center; 83 | 84 | svg { 85 | fill: #000000; 86 | } 87 | `; 88 | -------------------------------------------------------------------------------- /src/components/NavBar/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import { TiHome, TiHeartFullOutline } from 'react-icons/ti'; 5 | import { IoSettings } from 'react-icons/io5'; 6 | import { HiUser } from 'react-icons/hi'; 7 | 8 | const NavBar = () => { 9 | return ( 10 | 11 | 12 | Home 13 | 14 | 15 | 16 | 17 | 18 | Favourite 19 | 20 | 21 | 22 | 23 | 24 | User 25 | 26 | 27 | 28 | 29 | 30 | Setting 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default NavBar; 40 | 41 | const NavWrapper = styled.div` 42 | background-color: white; 43 | display: flex; 44 | justify-content: space-between; 45 | width: 100%; 46 | max-width: 400px; 47 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 48 | border-radius: 32px; 49 | `; 50 | 51 | const Item = styled.div` 52 | flex-basis: 100%; 53 | min-height: 80px; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | position: relative; 58 | color: #555; 59 | transform: translateY(0); 60 | transition: transform 0.5s ease, opacity 0.2s ease; 61 | cursor: pointer; 62 | overflow: hidden; 63 | 64 | :hover { 65 | color: #000000; 66 | transform: translateY(-6px); 67 | 68 | svg { 69 | color: ${({ hoverColor }) => hoverColor}; 70 | } 71 | 72 | .name { 73 | transform: translateY(20px); 74 | opacity: 1; 75 | color: ${({ hoverColor }) => hoverColor}; 76 | } 77 | } 78 | `; 79 | 80 | const Text = styled.div` 81 | position: absolute; 82 | transform: translate(0, 50px); 83 | transition: transform 0.5s ease, opacity 0.2s ease; 84 | color: grey; 85 | font-size: 14px; 86 | font-weight: 500; 87 | opacity: 0; 88 | `; 89 | const Icon = styled.div` 90 | width: 30px; 91 | height: 30px; 92 | 93 | svg { 94 | width: 100%; 95 | height: 100%; 96 | color: black; 97 | } 98 | `; 99 | -------------------------------------------------------------------------------- /src/components/RadioButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | function RadioButton({ value, handleClick, item }) { 5 | return ( 6 | handleClick(item.id)} isTrue={value === item.id}> 7 | {value === item.id ? : null} 8 | {item.name} 9 | 10 | ); 11 | } 12 | 13 | export default RadioButton; 14 | 15 | const Container = styled.div` 16 | width: 200px; 17 | height: 50px; 18 | border: 2px solid ${({ isTrue }) => (isTrue ? '#3a7bec' : '#e1e5e9')}; 19 | background-color: ${({ isTrue }) => (isTrue ? '#ffffff' : '#e1e5e9')}; 20 | border-radius: 8px; 21 | display: flex; 22 | align-items: center; 23 | margin: 10px 0; 24 | cursor: pointer; 25 | `; 26 | 27 | const Circle = styled.div` 28 | width: 30px; 29 | height: 30px; 30 | background-color: #3a7bec; 31 | border-radius: 50px; 32 | margin: 0px 10px; 33 | 34 | display: grid; 35 | place-items: center; 36 | `; 37 | const Dot = styled.div` 38 | width: 12px; 39 | height: 12px; 40 | background-color: #f0f4f7; 41 | border-radius: 50px; 42 | `; 43 | const ItemName = styled.div` 44 | color: black; 45 | font-size: 20px; 46 | font-weight: 600; 47 | margin-left: 10px; 48 | `; 49 | -------------------------------------------------------------------------------- /src/components/Slider/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | function SliderComponent({ value, handleChange, min, max, step }) { 5 | return ( 6 | 7 | 15 | 16 | ); 17 | } 18 | 19 | export default SliderComponent; 20 | const Container = styled.div` 21 | display: grid; 22 | place-items: center; 23 | margin-left: 10px; 24 | `; 25 | 26 | const Slider = styled.input` 27 | -webkit-appearance: none; 28 | width: 100%; 29 | height: 4px; 30 | border-radius: 4px; 31 | 32 | background-color: #e1e5e9; 33 | outline: none; 34 | opacity: 1; 35 | --webkit-transition: 0.2s; 36 | transition: opacity 0.2s; 37 | 38 | ::-webkit-slider-thumb { 39 | -webkit-appearance: none; 40 | appearance: none; 41 | width: 16px; 42 | height: 16px; 43 | border-radius: 50%; 44 | background: #3a7bec; 45 | cursor: pointer; 46 | border: none; 47 | } 48 | 49 | ::-moz-range-thumb { 50 | width: 16px; 51 | height: 16px; 52 | border-radius: 50%; 53 | background: #3a7bec; 54 | cursor: pointer; 55 | border: none; 56 | } 57 | `; 58 | -------------------------------------------------------------------------------- /src/components/ToggleButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | function ToggleButton({ value, handleClick }) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | export default ToggleButton; 13 | 14 | const Container = styled.div` 15 | box-sizing: border-box; 16 | margin: 0 5px; 17 | width: 45px; 18 | height: 25px; 19 | border: 1px solid #e1e5e9; 20 | border-radius: 12px; 21 | background-color: #f0f4f7; 22 | display: flex; 23 | align-items: center; 24 | cursor: pointer; 25 | `; 26 | 27 | const Circle = styled.div` 28 | width: 17px; 29 | height: 17px; 30 | border-radius: 50%; 31 | background-color: ${({ value }) => (value ? '#3a7bec' : '#5F7181')}; 32 | margin: 0 3px; 33 | transform: ${({ value }) => (value ? 'translateX(20px)' : 'translateX(0px)')}; 34 | transition: all 0.2s ease-in-out; 35 | `; 36 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import ToggleButton from './ToggleButton'; 2 | import SliderComponent from './Slider'; 3 | import Accordion from './Accordion'; 4 | import HamBurger from './HamBurger'; 5 | import HamBurgerDropdown from './HamBurgerDropdown'; 6 | import RadioButton from './RadioButton'; 7 | import Carousel from './Carousel'; 8 | import ContextMenu from './ContextMenu'; 9 | import IconWithToolTips from './IconWithTooltips'; 10 | import NavBar from './NavBar'; 11 | 12 | export { 13 | ToggleButton, 14 | SliderComponent, 15 | Accordion, 16 | HamBurger, 17 | HamBurgerDropdown, 18 | RadioButton, 19 | Carousel, 20 | ContextMenu, 21 | IconWithToolTips, 22 | NavBar, 23 | }; 24 | -------------------------------------------------------------------------------- /src/constant/contextMenuOption.js: -------------------------------------------------------------------------------- 1 | import { duplicateSvg, deleteSvg, editSvg } from './svgs'; 2 | 3 | export const ContentMenuOption = { 4 | duplicate: { 5 | label: 'Duplicate', 6 | icon: duplicateSvg(), 7 | }, 8 | delete: { 9 | label: 'Delete', 10 | icon: deleteSvg(), 11 | }, 12 | edit: { 13 | label: 'Edit', 14 | icon: editSvg(), 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /src/constant/index.js: -------------------------------------------------------------------------------- 1 | export { 2 | duplicateSvg, 3 | deleteSvg, 4 | editSvg, 5 | Twitter, 6 | Instagram, 7 | LinkedIn, 8 | Facebook, 9 | } from './svgs'; 10 | export { ContentMenuOption } from './contextMenuOption'; 11 | -------------------------------------------------------------------------------- /src/constant/svgs.js: -------------------------------------------------------------------------------- 1 | export const editSvg = (customStyles) => { 2 | return ( 3 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export const deleteSvg = () => { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export const duplicateSvg = () => { 24 | return ( 25 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export const Twitter = (customStyles) => { 39 | return ( 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | export const Instagram = (customStyles) => { 53 | return ( 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | ); 62 | }; 63 | 64 | export const LinkedIn = (customStyles) => { 65 | return ( 66 | 67 | 68 | 69 | 70 | 74 | 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export const Facebook = (customStyles) => { 86 | return ( 87 | 95 | 96 | 104 | 105 | 106 | ); 107 | }; 108 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Archia-Regular'; 3 | src: url('./assets/Archia-Regular.otf'); 4 | font-style: normal; 5 | font-weight: 400; 6 | font-display: swap; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | font-family: Archia-Regular; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | /* overflow: hidden; */ 15 | } 16 | 17 | code { 18 | font-family: Archia-Regular; 19 | } 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | --------------------------------------------------------------------------------