| return ( | return ( | ||||
| <> | <> | ||||
| <SmallDropdownContainer> | |||||
| <SmallDropdownContainer onClick={() => setDropdownHandler()}> | |||||
| <SmallDropdownText>{props.letters}</SmallDropdownText> | <SmallDropdownText>{props.letters}</SmallDropdownText> | ||||
| <SmallDropdownIcon | |||||
| onClick={() => setDropdownHandler()} | |||||
| dropdown={showDropdown} | |||||
| /> | |||||
| <SmallDropdownIcon dropdown={showDropdown} /> | |||||
| </SmallDropdownContainer> | </SmallDropdownContainer> | ||||
| <SmallDropdownContent dropdown={showDropdown}> | <SmallDropdownContent dropdown={showDropdown}> | ||||
| {dataFiltered.map((item) => { | {dataFiltered.map((item) => { |
| import styled from "styled-components"; | import styled from "styled-components"; | ||||
| import { Box, Typography } from "@mui/material"; | import { Box, Typography } from "@mui/material"; | ||||
| import { ReactComponent as DropdownDown } from "../../../../../../../assets/images/svg/down-arrow.svg"; | import { ReactComponent as DropdownDown } from "../../../../../../../assets/images/svg/down-arrow.svg"; | ||||
| import selectedTheme from "../../../../../../../themes"; | |||||
| export const SmallDropdownContainer = styled(Box)` | export const SmallDropdownContainer = styled(Box)` | ||||
| display: flex; | display: flex; | ||||
| margin-top: 20px; | margin-top: 20px; | ||||
| margin-left: -20px; | margin-left: -20px; | ||||
| margin-bottom: 14px; | margin-bottom: 14px; | ||||
| cursor: pointer; | |||||
| `; | `; | ||||
| export const SmallDropdownText = styled(Typography)` | export const SmallDropdownText = styled(Typography)` | ||||
| font-family: "DM Sans"; | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-size: 12px; | font-size: 12px; | ||||
| `; | `; | ||||
| import styled from "styled-components"; | import styled from "styled-components"; | ||||
| import { Box, Typography } from "@mui/material"; | import { Box, Typography } from "@mui/material"; | ||||
| import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg"; | import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg"; | ||||
| import selectedTheme from "../../../../../../themes"; | |||||
| export const SmallDropdownContainer = styled(Box)` | export const SmallDropdownContainer = styled(Box)` | ||||
| display: flex; | display: flex; | ||||
| `; | `; | ||||
| export const SmallDropdownText = styled(Typography)` | export const SmallDropdownText = styled(Typography)` | ||||
| font-family: "DM Sans"; | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| font-size: 12px; | font-size: 12px; | ||||
| `; | `; | ||||
| HeaderButton, | HeaderButton, | ||||
| HeaderButtons, | HeaderButtons, | ||||
| HeaderCategoryString, | HeaderCategoryString, | ||||
| HeaderCompanyString, | |||||
| HeaderContainer, | HeaderContainer, | ||||
| HeaderLocation, | HeaderLocation, | ||||
| HeaderLocationsMainString, | HeaderLocationsMainString, | ||||
| const goBack = () => { | const goBack = () => { | ||||
| history.goBack(); | history.goBack(); | ||||
| }; | }; | ||||
| console.log(headerString); | |||||
| return ( | return ( | ||||
| <> | <> | ||||
| <HeaderLocationsMainString component="span"> | <HeaderLocationsMainString component="span"> | ||||
| {headerString.locationsString} | {headerString.locationsString} | ||||
| </HeaderLocationsMainString> | </HeaderLocationsMainString> | ||||
| <HeaderCompanyString> | |||||
| {headerString.companiesString} | |||||
| </HeaderCompanyString> | |||||
| <HeaderAltLocation component="span"> | <HeaderAltLocation component="span"> | ||||
| {altString} | {altString} | ||||
| </HeaderAltLocation> | </HeaderAltLocation> |
| padding-top: 3px; | padding-top: 3px; | ||||
| } | } | ||||
| `; | `; | ||||
| export const HeaderCompanyString = styled(Typography)` | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| max-width: 200px; | |||||
| color: ${selectedTheme.colors.primaryPurple}; | |||||
| font-weight: 700; | |||||
| line-height: 22px; | |||||
| font-size: 16px; | |||||
| @media (max-width: 600px) { | |||||
| font-size: 12px; | |||||
| padding-top: 3px; | |||||
| } | |||||
| `; | |||||
| export const HeaderButton = styled(IconButton)` | export const HeaderButton = styled(IconButton)` | ||||
| padding: 2px 10px; | padding: 2px 10px; | ||||
| @media (max-width: 1500px) { | @media (max-width: 1500px) { |