Added: embed fields, footer, image and thumbnail

Author: metehus

README.md

@@ -33,11 +33,11 @@
   - [ ] Embeds
     - [x] Title
     - [x] Author
-    - [ ] Description
-    - [ ] Fields
+    - [x] Description
+    - [x] Fields
     - [ ] Inside markdown
-    - [ ] Footer
-    - [ ] Color
+    - [x] Footer
+    - [x] Color
 
 The following components can be used on other cases like a "channel selector"
 - [ ] Other components

example/src/App.js

@@ -24,7 +24,8 @@ const App = () => {
     <ThemeProvider theme={isDark ? dark : light}>
       <MessageWrapper style={{
         borderRadius: 3,
-        boxShadow: `2px 2px 13px 3px rgba(0, 0, 0, 0.3)`
+        boxShadow: `2px 2px 13px 3px rgba(0, 0, 0, 0.3)`,
+        maxWidth: 800
       }}>
         <Message
           avatar={'https://cdn.discordapp.com/avatars/205873263258107905/62b8cf8c20107e61b51b8194ac716c53.webp?size=256'}
@@ -49,15 +50,44 @@ const App = () => {
               verified: true
             }}
           >
-            {/*oi eu sou um bot muito **bobão***/}
+
             <MessageEmbed
               title="bobao"
               author={{
                 name: 'pipipi popopo',
                 icon: 'https://cdn.discordapp.com/attachments/696797678356398671/744044111157526548/20200814_192551.jpg'
               }}
+              footer={{
+                text: 'bom dia amigo',
+                icon: 'https://cdn.discordapp.com/attachments/696797678356398671/744778541245268038/unknown.png'
+              }}
+              color="#03fc84"
+              thumbnail="https://cdn.discordapp.com/attachments/696797678356398671/745052530714869780/IMG-20200817-WA0021.jpeg"
+              image="https://cdn.discordapp.com/attachments/696797678356398671/744681438649122866/FB_IMG_1597616284534.jpg"
+              fields={[
+                {
+                  name: 'bom dia',
+                  value: 'teste'
+                },
+                {
+                  name: 'bom dia',
+                  value: 'teste'
+                },
+                {
+                  name: 'pedro é oq',
+                  value: 'bobao',
+                  inline: true
+                },
+                {
+                  name: 'davi tb?',
+                  value: 'ss',
+                  inline: true
+                }
+              ]}
             >
-              aa
+              Mussum Ipsum, cacilds vidis litro abertis. Si num tem leite então bota uma pinga aí cumpadi! Nec orci ornare
+              consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis. Quem num gosta di mim que vai caçá
+              sua turmis! Suco de cevadiss deixa as pessoas mais interessantis.
             </MessageEmbed>
           </MessageContent>
         </Message>

src/components/FieldsWrapper.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+const Field = styled.div`
+  margin-top: 8px;
+`;
+
+const FieldTitle = styled.span`
+  font-weight: 600;
+  margin-bottom: 2px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  min-width: 0;
+  display: block;
+  color: ${({ theme }) => theme.palette.embed.header}
+`
+
+const FieldValue = styled.span`
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: 400;
+  white-space: pre-line;
+  min-width: 0;
+`
+
+function FieldsWrapper(props) {
+  return <Wrapper>
+    {
+      props.fields.map(field => <Field style={field.inline ? {
+        flex: 1,
+        minWidth: 150,
+        flexBasis: 'auto'
+      } : {
+        flex: 0,
+        minWidth: '100%',
+        maxWidth: 506
+      }}>
+        <FieldTitle>{field.name}</FieldTitle>
+        <FieldValue>{field.value}</FieldValue>
+      </Field>)
+    }
+  </Wrapper>
+}
+
+export default FieldsWrapper

src/components/MessageEmbed.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import FieldsWrapper from './FieldsWrapper'
 
 const Embed = styled.div`
   max-wdth: 520px;
@@ -10,6 +11,10 @@ const Embed = styled.div`
   line-height: 1.375rem;
 `
 
+const EmbedWrapper = styled.div`
+  display: flex;
+`
+
 const EmbedTitle = styled.span`
   display: block;
   font-weight: 600;
@@ -42,27 +47,81 @@ const AuthorIcon = styled.img`
   height: 24px;
   object-fit: contain;
   border-radius: 50%;
-}
+`
+
+const FooterWrapper = styled.div`
+  margin-top: 8px;
+  display: flex;
+`
+
+const FooterText = styled.span`
+  font-size: 0.75rem;
+  font-weight: 500;
+`
+
+const FooterIcon = styled.img`
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  border-radius: 50%;
+`
+
+const Media = styled.img`
+  max-width: 520px;
+  border-radius: 4px;
+  margin-top: 16px;
+`
+
+const Thumbnail = styled.img`
+  width: 80px;
+  height: 80px;
+  margin-left: 16px;
+  margin-top: 8px;
+  border-radius: 4px;
 `
 
 function MessageEmbed(props) {
   return <Embed style={{
     borderColor: props.color
   }}>
-    {
-      props.author && props.author.name && <EmbedAuthorWrapper>
+    <EmbedWrapper>
+      <div>
         {
-          props.author.icon && <AuthorIcon src={props.author.icon} />
+          props.author && props.author.name && <EmbedAuthorWrapper>
+            {
+              props.author.icon && <AuthorIcon src={props.author.icon} />
+            }
+            <EmbedAuthor>{props.author.name}</EmbedAuthor>
+          </EmbedAuthorWrapper>
         }
-        <EmbedAuthor>{props.author.name}</EmbedAuthor>
-      </EmbedAuthorWrapper>
+        {
+          props.title && <EmbedTitle>{props.title}</EmbedTitle>
+        }
+        <EmbedContent>
+          {props.children}
+        </EmbedContent>
+        {
+          props.fields && props.fields.length && <FieldsWrapper fields={props.fields} />
+        }
+      </div>
+      {
+        props.thumbnail && <Thumbnail src={props.thumbnail} />
+      }
+    </EmbedWrapper>
+
+    {
+      props.image && <Media src={props.image} />
     }
     {
-      props.title && <EmbedTitle>{props.title}</EmbedTitle>
+      props.footer && props.footer.text && <FooterWrapper>
+        {
+          props.footer.icon && <FooterIcon src={props.footer.icon} />
+        }
+        <FooterText>{props.footer.text}</FooterText>
+      </FooterWrapper>
     }
-    <EmbedContent>
-      {props.children}
-    </EmbedContent>
   </Embed>
 }