Merge pull request #21 from MargoMarm/feature/discription

Feature/discription
MargoMarm · Sep 17, 2023 · 001610d · 001610d
2 parents de6b485 + f8fe101
commit 001610d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
diff --git a/src/components/DiscriptionText/DescriptionText.jsx 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 (
+      <Container>
+        <Icon>
+          <use href={sprite + `#icon-exclamation-mark`}></use>
+        </Icon>
+        <Text>{text}</Text>;
+      </Container>
+  );
+};
+
+DescriptionText.propTypes = {
+  text: PropTypes.string,
+};
+
+export default DescriptionText;
diff --git a/src/components/DiscriptionText/DescriptionText.styled.jsx 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;
+  }
+`;