From ad96a7add234c51dd073bdde2eacd8963469a86e Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 6 Sep 2022 14:10:35 +0300
Subject: [PATCH] Contacts update

---
 src/components/Contacts/contacts.module.css |  7 +++++++
 src/components/Contacts/index.tsx           | 21 +++++++++------------
 2 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Contacts/contacts.module.css

diff --git a/src/components/Contacts/contacts.module.css b/src/components/Contacts/contacts.module.css
new file mode 100644
index 00000000..660ae946
--- /dev/null
+++ b/src/components/Contacts/contacts.module.css
@@ -0,0 +1,7 @@
+.strong {
+    margin-bottom: var(--size-m);
+}
+
+.link {
+    margin-bottom: var(--size-s);
+}
diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx
index 6b546f04..79436dc8 100644
--- a/src/components/Contacts/index.tsx
+++ b/src/components/Contacts/index.tsx
@@ -1,25 +1,22 @@
+import s from './contacts.module.css'
+
 import { useContext } from 'react'
 import { ConfigContext } from 'src/context/ConfigContext'
+import Link from 'next/link'
 
 export const Contacts: React.FC = props => {
     const { contacts } = useContext(ConfigContext)
 
     return (
         <>
-            <style jsx>{`
-                strong {
-                    margin-bottom: var(--size-m);
-                }
-
-                p {
-                    margin-bottom: var(--size-s);
-                }
-            `}</style>
-
-            <strong>Контактная информация</strong>
+            <strong className={s.strong}>Контактная информация</strong>
 
             {contacts.map((x, i) => (
-                <p key={i}><a href={x.value}>{x.title}</a></p>
+                <p key={i} className={s.link}>
+                    <Link href={x.value}>
+                        <a >{x.title}</a>
+                    </Link>
+                </p>
             ))}
         </>
     )