├── README.md
├── src
    ├── index.js
    ├── components
    │   ├── Cards
    │   │   ├── Cards.module.css
    │   │   ├── index.jsx
    │   │   └── Card
    │   │   │   ├── index.jsx
    │   │   │   └── Card.module.css
    │   └── Search
    │   │   ├── index.jsx
    │   │   └── Search.module.css
    ├── containers
    │   ├── App.module.css
    │   └── App.js
    ├── constants
    │   └── cards-constant.js
    └── index.css
├── .gitignore
├── public
    ├── assets
    │   └── icons
    │   │   ├── search.svg
    │   │   ├── property.svg
    │   │   ├── bike.svg
    │   │   ├── cars.svg
    │   │   ├── economy.svg
    │   │   ├── ticket.svg
    │   │   └── boat.svg
    └── index.html
└── package.json


/README.md:
--------------------------------------------------------------------------------
1 | ## preview
2 | 
3 | ![Day 1350 Search UI Component Design](https://user-images.githubusercontent.com/66781740/119057342-8bd98280-b9e1-11eb-8c47-91f8f5990e05.png)


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './containers/App';
4 | import './index.css';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/components/Cards/Cards.module.css:
--------------------------------------------------------------------------------
 1 | .Cards {
 2 |   display: grid;
 3 |   width: 100%;
 4 |   grid-template-columns: repeat(2, 1fr);
 5 |   grid-template-rows: 1fr;
 6 |   justify-content: space-between;
 7 |   margin-top: 3rem;
 8 |   gap: 1rem;
 9 | }
10 | 
11 | @media (min-width: 768px) {
12 |   .Cards {
13 |     grid-template-columns: repeat(3, 1fr);
14 | 
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/containers/App.module.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   background-color: var(--search_background);
 3 |   padding: 4rem 2rem;
 4 |   width: 22rem;
 5 |   border-radius: 1rem;
 6 | }
 7 | 
 8 | @media (min-width: 499px) {
 9 |   .App {
10 |     width: 27rem;
11 |   }
12 | }
13 | 
14 | @media (min-width: 768px) {
15 |   .App {
16 |     width: 35rem;
17 |     padding: 4rem;
18 |   }
19 | }
20 | 


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


--------------------------------------------------------------------------------
/src/components/Cards/index.jsx:
--------------------------------------------------------------------------------
 1 | import Card from './Card';
 2 | import classes from './Cards.module.css';
 3 | 
 4 | const Cards = ({ cards }) => {
 5 |   let card = cards.map(card => (
 6 |     <Card
 7 |       key={card.themeColor}
 8 |       title={card.title}
 9 |       image={card.image}
10 |       color={card.themeColor}
11 |     />
12 |   ));
13 | 
14 |   return <main className={classes.Cards}>{card}</main>;
15 | };
16 | 
17 | export default Cards;
18 | 


--------------------------------------------------------------------------------
/public/assets/icons/search.svg:
--------------------------------------------------------------------------------
1 | <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M14.1667 24.0833C19.6435 24.0833 24.0833 19.6435 24.0833 14.1667C24.0833 8.68984 19.6435 4.25 14.1667 4.25C8.68984 4.25 4.25 8.68984 4.25 14.1667C4.25 19.6435 8.68984 24.0833 14.1667 24.0833Z" stroke="#2B417B" stroke-width="2.125" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M29.75 29.75L21.25 21.25" stroke="#2B417B" stroke-width="2.125" stroke-linecap="round" stroke-linejoin="round"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/constants/cards-constant.js:
--------------------------------------------------------------------------------
 1 | export const CARDS_DETAILS = [
 2 |   { title: 'Boat', image: 'assets/icons/boat.svg', themeColor: '#ff8faa' },
 3 |   { title: 'Cars', image: 'assets/icons/cars.svg', themeColor: '#8fbcff' },
 4 |   { title: 'Bike', image: 'assets/icons/bike.svg', themeColor: '#a6cd74' },
 5 |   {
 6 |     title: 'Property',
 7 |     image: 'assets/icons/property.svg',
 8 |     themeColor: '#a68fff'
 9 |   },
10 |   { title: 'Ticket', image: 'assets/icons/ticket.svg', themeColor: '#fcc18a' },
11 |   { title: 'Economy', image: 'assets/icons/economy.svg', themeColor: '#6edddd' }
12 | ];
13 | 


--------------------------------------------------------------------------------
/src/components/Cards/Card/index.jsx:
--------------------------------------------------------------------------------
 1 | import classes from './Card.module.css';
 2 | 
 3 | const Card = props => {
 4 |   const { title, image, color } = props;
 5 |   return (
 6 |     <article className={classes.Card} style={{ border: `2px solid ${color}` }}>
 7 |       <div className={classes.CardDivider} style={{ background: color }}></div>
 8 |       <div className={classes.CardDetails}>
 9 |         <img className={classes.CardImage} src={image} alt={title} />
10 |         <p className={classes.CardTitle}>{title}</p>
11 |       </div>
12 |     </article>
13 |   );
14 | };
15 | 
16 | export default Card;
17 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 |   outline: 0;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | :root {
 8 |   --main_background: #f2f0ff;
 9 |   --search_background: #ffffff;
10 |   --economy_color: #6edddd;
11 |   --ticket_color: #fcc18a;
12 |   --bike_color: #a6cd74;
13 |   --property_color: #a68fff;
14 |   --cars_color: #8fbcff;
15 |   --boat_color: #ff8faa;
16 |   --search_color: #2b417b;
17 | }
18 | 
19 | body {
20 |   margin: 0;
21 |   padding: 0;
22 |   height: 100vh;
23 |   background: var(--main_background);
24 |   display: flex;
25 |   justify-content: center;
26 |   align-items: center;
27 |   font-family: 'Open Sans', sans-serif;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Cards/Card/Card.module.css:
--------------------------------------------------------------------------------
 1 | .Card {
 2 |   position: relative;
 3 |   border-radius: 0.6rem;
 4 |   text-align: center;
 5 |   display: flex;
 6 |   align-items: center;
 7 |   flex-direction: column;
 8 | }
 9 | .Card:hover {
10 |   box-shadow: 1px 1px 15px inherit;
11 | }
12 | .CardDivider {
13 |   width: 65%;
14 |   height: 10px;
15 |   border-bottom-left-radius: 5px;
16 |   border-bottom-right-radius: 5px;
17 | }
18 | .CardImage {
19 |   max-height: 3rem;
20 |   margin-bottom: 0.5rem;
21 | }
22 | 
23 | .CardTitle {
24 |   color: var(--search_color);
25 |   text-align: center;
26 |   font-weight: 500;
27 | }
28 | 
29 | .CardDetails {
30 |   display: flex;
31 |   flex-direction: column;
32 |   padding: 1.5rem 1rem;
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/Search/index.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import classes from './Search.module.css';
 3 | 
 4 | const Search = ({ onSearch }) => {
 5 |   const [inputValue, setInputValue] = useState('');
 6 | 
 7 |   const filterHandler = e => {
 8 |     setInputValue(e.target.value);
 9 |     onSearch(e);
10 |   };
11 |   return (
12 |     <div className={classes.Search}>
13 |       <input
14 |         type='text'
15 |         onChange={e => filterHandler(e)}
16 |         value={inputValue}
17 |         className={classes.SearchInput}
18 |         placeholder='Search'
19 |       />
20 |       <img
21 |         className={classes.SearchIcon}
22 |         src='assets/icons/search.svg'
23 |         alt='search icon'
24 |       />
25 |     </div>
26 |   );
27 | };
28 | 
29 | export default Search;
30 | 


--------------------------------------------------------------------------------
/src/components/Search/Search.module.css:
--------------------------------------------------------------------------------
 1 | .Search {
 2 |   border-bottom: 1px solid var(--main_background);
 3 |   position: relative;
 4 |   padding-bottom: 0.3rem;
 5 | }
 6 | 
 7 | .SearchInput {
 8 |   border: 0;
 9 |   padding: 0.8rem 2rem;
10 |   color: var(--search_color);
11 |   width: 100%;
12 | }
13 | 
14 | .SearchInput::placeholder {
15 |   color: var(--search_color);
16 | }
17 | 
18 | .SearchIcon {
19 |   max-width: 1.5rem;
20 |   position: absolute;
21 |   left: 0rem;
22 |   top: 0.5rem;
23 | }
24 | 
25 | @media (min-width: 768px) {
26 |   .SearchInput {
27 |     border: 0;
28 |     padding: 0.8rem 2.5rem;
29 |     color: var(--search_color);
30 |     width: 100%;
31 |     font-size: 1rem;
32 |   }
33 | 
34 | 
35 |   .SearchIcon {
36 |     max-width: 1.8rem;
37 |     position: absolute;
38 |     left: 0rem;
39 |     top: 0.4rem;
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/assets/icons/property.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9.16667 22H5.5L22 5.5L38.5 22H34.8333" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M9.16663 22V34.8333C9.16663 35.8058 9.55293 36.7384 10.2406 37.4261C10.9282 38.1137 11.8608 38.5 12.8333 38.5H31.1666C32.1391 38.5 33.0717 38.1137 33.7594 37.4261C34.447 36.7384 34.8333 35.8058 34.8333 34.8333V22" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M16.5 38.5V27.5C16.5 26.5275 16.8863 25.5949 17.5739 24.9073C18.2616 24.2196 19.1942 23.8333 20.1667 23.8333H23.8333C24.8058 23.8333 25.7384 24.2196 26.4261 24.9073C27.1137 25.5949 27.5 26.5275 27.5 27.5V38.5" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/containers/App.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import Cards from '../components/Cards';
 3 | import Search from '../components/Search';
 4 | import { CARDS_DETAILS } from '../constants/cards-constant';
 5 | import classes from './App.module.css';
 6 | 
 7 | function App() {
 8 |   const [cards, setCards] = useState([...CARDS_DETAILS]);
 9 | 
10 |   const searchHandler = ({ target }) => {
11 |     const cards = [...CARDS_DETAILS];
12 |     const filtredCards = cards.filter(card => {
13 |       return card.title.toLowerCase().includes(target.value.toLowerCase());
14 |     });
15 | 
16 |     setCards(prevCards => {
17 |       prevCards.length = 0;
18 |       return filtredCards;
19 |     });
20 |   };
21 |   return (
22 |     <div className={classes.App}>
23 |       <Search onSearch={searchHandler} />
24 |       <Cards cards={cards} />
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "search-ui",
 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 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-scripts": "4.0.3",
12 |     "web-vitals": "^1.0.1"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/assets/icons/bike.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9.16663 34.8333C12.2042 34.8333 14.6666 32.3709 14.6666 29.3333C14.6666 26.2957 12.2042 23.8333 9.16663 23.8333C6.12906 23.8333 3.66663 26.2957 3.66663 29.3333C3.66663 32.3709 6.12906 34.8333 9.16663 34.8333Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M34.8334 34.8333C37.8709 34.8333 40.3334 32.3709 40.3334 29.3333C40.3334 26.2957 37.8709 23.8333 34.8334 23.8333C31.7958 23.8333 29.3334 26.2957 29.3334 29.3333C29.3334 32.3709 31.7958 34.8333 34.8334 34.8333Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M13.75 25.6666L21.0833 18.3333M13.75 25.6666H22.9167L30.25 18.3333H11L13.75 25.6666Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | <path d="M23.8334 11H27.5L30.25 16.5L33.9167 23.8333" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/public/assets/icons/cars.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M22 20.1667V11M9.16667 31.1667H5.5V20.1667L9.16667 11H25.6667L33 20.1667H34.8333C35.8058 20.1667 36.7384 20.553 37.4261 21.2406C38.1137 21.9282 38.5 22.8609 38.5 23.8333V31.1667H34.8333H9.16667ZM27.5 31.1667H16.5H27.5ZM5.5 20.1667H33H5.5Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M12.8334 34.8333C14.8584 34.8333 16.5 33.1917 16.5 31.1667C16.5 29.1416 14.8584 27.5 12.8334 27.5C10.8083 27.5 9.16669 29.1416 9.16669 31.1667C9.16669 33.1917 10.8083 34.8333 12.8334 34.8333Z" fill="white" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M31.1667 34.8333C33.1917 34.8333 34.8333 33.1917 34.8333 31.1667C34.8333 29.1416 33.1917 27.5 31.1667 27.5C29.1416 27.5 27.5 29.1416 27.5 31.1667C27.5 33.1917 29.1416 34.8333 31.1667 34.8333Z" fill="white" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/public/assets/icons/economy.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M34.8333 16.5H16.5C14.4749 16.5 12.8333 18.1416 12.8333 20.1667V31.1667C12.8333 33.1917 14.4749 34.8333 16.5 34.8333H34.8333C36.8584 34.8333 38.5 33.1917 38.5 31.1667V20.1667C38.5 18.1416 36.8584 16.5 34.8333 16.5Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M25.6667 29.3333C27.6917 29.3333 29.3333 27.6917 29.3333 25.6667C29.3333 23.6416 27.6917 22 25.6667 22C23.6416 22 22 23.6416 22 25.6667C22 27.6917 23.6416 29.3333 25.6667 29.3333Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M31.1667 16.5V12.8334C31.1667 11.8609 30.7804 10.9283 30.0927 10.2406C29.4051 9.553 28.4725 9.16669 27.5 9.16669H9.16667C8.19421 9.16669 7.26158 9.553 6.57394 10.2406C5.88631 10.9283 5.5 11.8609 5.5 12.8334V23.8334C5.5 24.8058 5.88631 25.7384 6.57394 26.4261C7.26158 27.1137 8.19421 27.5 9.16667 27.5H12.8333" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Web site created using create-react-app"
10 |     />
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,300&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <style>
17 |       body {
18 |         background: #e1daff;
19 |         height: 100vh;
20 |         margin: 0;
21 |         display: flex;
22 |         justify-content: center;
23 |         align-items: center;
24 |       }
25 |       noscript {
26 |         color: #2b417b;
27 |         font: 1.3rem bold;
28 |         font-family: 'Open Sans', sans-serif;
29 |       }
30 |     </style>
31 |     <title>Search-UI</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/public/assets/icons/ticket.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M27.5 9.16669V12.8334" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M27.5 20.1667V23.8334" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M27.5 31.1667V34.8334" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | <path d="M9.16667 9.16669H34.8333C35.8058 9.16669 36.7384 9.553 37.4261 10.2406C38.1137 10.9283 38.5 11.8609 38.5 12.8334V18.3334C37.5275 18.3334 36.5949 18.7197 35.9073 19.4073C35.2196 20.0949 34.8333 21.0276 34.8333 22C34.8333 22.9725 35.2196 23.9051 35.9073 24.5927C36.5949 25.2804 37.5275 25.6667 38.5 25.6667V31.1667C38.5 32.1391 38.1137 33.0718 37.4261 33.7594C36.7384 34.447 35.8058 34.8334 34.8333 34.8334H9.16667C8.19421 34.8334 7.26158 34.447 6.57394 33.7594C5.88631 33.0718 5.5 32.1391 5.5 31.1667V25.6667C6.47246 25.6667 7.40509 25.2804 8.09273 24.5927C8.78036 23.9051 9.16667 22.9725 9.16667 22C9.16667 21.0276 8.78036 20.0949 8.09273 19.4073C7.40509 18.7197 6.47246 18.3334 5.5 18.3334V12.8334C5.5 11.8609 5.88631 10.9283 6.57394 10.2406C7.26158 9.553 8.19421 9.16669 9.16667 9.16669" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/public/assets/icons/boat.svg:
--------------------------------------------------------------------------------
1 | <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3.66669 36.6667C4.08317 37.2469 4.63464 37.7171 5.27346 38.0365C5.91229 38.3559 6.61928 38.515 7.33335 38.5C8.04743 38.515 8.75441 38.3559 9.39324 38.0365C10.0321 37.7171 10.5835 37.2469 11 36.6667C11.4165 36.0865 11.968 35.6163 12.6068 35.2969C13.2456 34.9775 13.9526 34.8184 14.6667 34.8334C15.3808 34.8184 16.0877 34.9775 16.7266 35.2969C17.3654 35.6163 17.9169 36.0865 18.3334 36.6667C18.7498 37.2469 19.3013 37.7171 19.9401 38.0365C20.579 38.3559 21.2859 38.515 22 38.5C22.7141 38.515 23.4211 38.3559 24.0599 38.0365C24.6987 37.7171 25.2502 37.2469 25.6667 36.6667C26.0832 36.0865 26.6346 35.6163 27.2735 35.2969C27.9123 34.9775 28.6193 34.8184 29.3334 34.8334C30.0474 34.8184 30.7544 34.9775 31.3932 35.2969C32.0321 35.6163 32.5835 36.0865 33 36.6667C33.4165 37.2469 33.968 37.7171 34.6068 38.0365C35.2456 38.3559 35.9526 38.515 36.6667 38.5C37.3808 38.515 38.0877 38.3559 38.7266 38.0365C39.3654 37.7171 39.9169 37.2469 40.3334 36.6667" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
3 | <path d="M7.33333 33L5.5 27.5H38.5L36.6667 33" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
4 | <path d="M20.1667 22H33L20.1667 5.5V22Z" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
5 | <path d="M14.6667 12.8333L11 22" stroke="#2B417B" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>
6 | </svg>
7 | 


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