added links block

.idea/workspace.xml

@@ -11,10 +11,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="4b1db503-490b-4f06-812d-6b9b94d2764a" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/components/elements/contacts.jsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/css/elements/contacts.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/elements/homepage/recent-list.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/elements/homepage/recent-list.jsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/css/basic.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/basic.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/css/elements/recent-list.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/elements/recent-list.scss" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -72,7 +73,7 @@
       <workItem from="1589253283370" duration="5339000" />
       <workItem from="1589450996359" duration="6767000" />
       <workItem from="1589583447607" duration="5148000" />
-      <workItem from="1590125952856" duration="9841000" />
+      <workItem from="1590125952856" duration="12421000" />
     </task>
     <servers />
   </component>

src/components/elements/contacts.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import asciiWord from "../../functions/ascii-word";
+
+const links = [{
+    site: 'github',
+    url: 'https://github.com'
+},
+    {
+        site: 'twitter',
+        url:'https://twitter.com'
+    },
+    {
+        site: 'telegram',
+        url: 'https://telegram.org'
+    }]
+
+const SocialLink = props => {
+    return (
+        <a href={props.url} className={' contact-link'}>
+                <pre>
+                {asciiWord(props.site, 'Nacyj')}
+                </pre>
+        </a>
+    )
+}
+
+const Contacts = props => {
+return (
+    <ul className={'contacts'}>
+        {links.map(link => (
+            <li key={link.url}>
+                <SocialLink url={link.url} site={link.site}/>
+            </li>
+        ))}
+    </ul>
+)
+
+}
+
+export default Contacts

src/components/elements/homepage/recent-list.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import RecentBlock from "./recent-block";
+import Contacts from "../contacts";
 
 const Recent = props => {
     return (
@@ -29,6 +30,7 @@ const Recent = props => {
                     <RecentBlock header={" Life is unfair, kill yourself or get over it"} pos={'left'}/>
                 </li>
             </ul>
+            <Contacts/>
         </section>
     )
 }

src/css/basic.scss

@@ -13,7 +13,13 @@ body {
   box-shadow: 0px -30px 20px rgba(0, 0, 0, 0.34);
 
 
+
 }
+ a{
+   &:hover, &:focus{
+     color: var(--pink)
+   }
+ }
 
 @media (min-width: 1000px) {
   box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34);
@@ -29,4 +35,5 @@ body {
 
 @import "logo";
 @import "elements/page-links";
-@import "elements/recent-list";
+@import "elements/recent-list";
+@import "elements/contacts";

src/css/elements/contacts.scss

@@ -0,0 +1,17 @@
+.contacts{
+  list-style: none;
+  padding: 0;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  width: 60vw;
+  margin: 0 auto;
+}
+
+.contact-link{
+  text-decoration: none;
+  font-size: 0.3em;
+  color: var(--cyan);
+  line-height: 0.8em;
+
+}