diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg index f37a251b..14be5d8e 100644 --- a/src/assets/sprite.svg +++ b/src/assets/sprite.svg @@ -130,5 +130,10 @@ + + + + + diff --git a/src/components/DiscriptionText/DescriptionText.jsx b/src/components/DiscriptionText/DescriptionText.jsx new file mode 100644 index 00000000..72a7c2c7 --- /dev/null +++ b/src/components/DiscriptionText/DescriptionText.jsx @@ -0,0 +1,20 @@ +import PropTypes from 'prop-types'; +import { Container, Text, Icon } from './DescriptionText.styled'; +import sprite from '../../assets/sprite.svg'; + +const DescriptionText = ({ text }) => { + return ( + + + + + {text}; + + ); +}; + +DescriptionText.propTypes = { + text: PropTypes.string, +}; + +export default DescriptionText; diff --git a/src/components/DiscriptionText/DescriptionText.styled.jsx b/src/components/DiscriptionText/DescriptionText.styled.jsx new file mode 100644 index 00000000..eb316809 --- /dev/null +++ b/src/components/DiscriptionText/DescriptionText.styled.jsx @@ -0,0 +1,33 @@ +import styled from '@emotion/styled'; +import { colors, mq } from '../../utils'; + +export const Container = styled.div` + display: flex; + gap: 8px; + width: 335px; + + ${mq.tablet} { + width: 439px; + } +`; + +export const Icon = styled.svg` + width: 24px; + height: 24px; +`; + +export const Text = styled.p` + color: ${colors.textWhite03}; + font-family: Roboto; + font-size: 14px; + font-style: normal; + line-height: 1.3; + margin: 0; + width: 303px; + + ${mq.tablet} { + font-size: 16px; + line-height: 1.5; + width: 407px; + } +`;