Move button to separate component (#117)

components/Button/Button.jsx

@@ -0,0 +1,20 @@
+import cn from 'classnames'
+import styles from './Button.module.css'
+
+export function Button({ link, type = 'primary', size = 'small', onClick, children }) {
+    const className = cn(
+        styles.Button,
+        styles[`Button_type-${type}`],
+        styles[`Button_size-${size}`]
+    )
+
+    return link ? (
+        <a className={className} href={link} target="_blank" rel="noreferrer" onClick={onClick}>
+            {children}
+        </a>
+    ) : (
+        <button type="button" className={className} onClick={onClick}>
+            {children}
+        </button>
+    )
+}

components/Button/Button.module.css

@@ -0,0 +1,46 @@
+.Button {
+    display: inline-block;
+    border: 0;
+    border-radius: 40px;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 1.33;
+    text-decoration: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.Button_type-primary {
+    background: black;
+    color: white;
+}
+
+.Button_type-secondary {
+    background: #ffd400;
+    color: black;
+}
+
+.Button_type-secondary:hover {
+    background: #e1bb00;
+}
+
+.Button_size-small {
+    padding: 8px 12px;
+}
+
+.Button_size-large {
+    padding: 12px 32px;
+}
+
+@media screen and (min-width: 768px) {
+    .Button {
+        font-size: 16px;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .Button {
+        font-size: 18px;
+    }
+}

components/MainPage/MainPage.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Logo } from '../Logo/Logo'
 import ManualPreview from '../ManualPreview/ManualPreview'
-import { Ecosystem } from '../Ecosystem/Ecosystem'
 import { ProjectLinks } from '../ProjectLinks/ProjectLinks'
+import { Ecosystem } from '../Ecosystem/Ecosystem'
 
 import styles from './MainPage.module.css'
 

components/ProjectLinks/ProjectLinks.jsx

@@ -1,28 +1,27 @@
 import React from 'react'
-
 import cn from 'classnames'
+import { Button } from '../Button/Button'
+import Github from './github.svg'
 
 import styles from './ProjectLinks.module.css'
 
-import Github from './github.svg'
-
 export function ProjectLinks() {
     return (
         <div className={cn(styles.ProjectLinks)}>
             <a
-                className={cn(styles.ProjectLinks__button, styles.ProjectLinks__button_about)}
+                className={cn(styles.ProjectLinks__github)}
                 href="https://github.com/ekaterinburgdev/guides"
                 target="_blank"
                 aria-label="Код проекта на GitHub"
             >
                 <Github />
             </a>
-            <a
-                className={cn(styles.ProjectLinks__button, styles.ProjectLinks__button_feedback)}
-                href="https://tally.so#tally-open=w5ZYXd&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+            <Button
+                type="secondary"
+                link="https://tally.so#tally-open=w5ZYXd&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
             >
                 Фидбек
-            </a>
+            </Button>
         </div>
     )
 }

components/ProjectLinks/ProjectLinks.module.css

@@ -2,54 +2,38 @@
     position: fixed;
     right: 2px;
     bottom: 2px;
-    display: none;
-    gap: 8px;
-    padding: 6px;
-    border-radius: 24px;
-    background: rgba(255, 255, 255, .9);
-}
-
-.ProjectLinks__button {
-    display: inline-flex;
+    display: flex;
+    gap: 4px;
     align-items: center;
-    padding: 8px 12px;
-    border-radius: 160px;
-    color: black;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 1.33;
-    text-decoration: none;
-    transition: .15s ease;
+    padding: 6px;
 }
 
-.ProjectLinks__button_about {
+.ProjectLinks__github {
+    display: none;
     color: black;
-    padding: 0;
-}
-
-.ProjectLinks__button_about:hover {
-    color: #646464;
 }
 
-.ProjectLinks__button_about:active {
-    color: #a1a1a1;
+.ProjectLinks__github svg {
+    vertical-align: middle;
+    height: 100%;
 }
 
-.ProjectLinks__button_feedback {
-    background: #ffd400;
+.ProjectLinks__github:hover {
+    color: #3e3e3e;
 }
 
-.ProjectLinks__button_feedback:hover {
-    background: #3e3e3e;
-    color: white;
+.ProjectLinks__github:active {
+    color: #535353;
 }
 
-.ProjectLinks__button_feedback:active {
-    background: black;
+@media screen and (min-width: 350px) {
+    .ProjectLinks__github {
+        display: block;
+    }
 }
 
-@media screen and (min-width: 991px) {
+@media screen and (min-width: 768px) {
     .ProjectLinks {
-        display: flex;
+        gap: 8px;
     }
-}
+}