From 2344fc74bfb772b758ebe51c2cee3e082c99a621 Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Wed, 4 Jan 2023 15:43:48 +0000
Subject: [PATCH] Creating component for sharing URL fo the profile page

---
 .../Profile/Header/Share.module.css           |  3 +++
 src/components/Profile/Header/Share.tsx       | 20 +++++++++++++++++++
 src/components/Profile/Header/index.tsx       |  2 ++
 3 files changed, 25 insertions(+)
 create mode 100644 src/components/Profile/Header/Share.module.css
 create mode 100644 src/components/Profile/Header/Share.tsx

diff --git a/src/components/Profile/Header/Share.module.css b/src/components/Profile/Header/Share.module.css
new file mode 100644
index 000000000..b56b8b9ec
--- /dev/null
+++ b/src/components/Profile/Header/Share.module.css
@@ -0,0 +1,3 @@
+.share {
+  padding: 10px;
+}
diff --git a/src/components/Profile/Header/Share.tsx b/src/components/Profile/Header/Share.tsx
new file mode 100644
index 000000000..18ae2034f
--- /dev/null
+++ b/src/components/Profile/Header/Share.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react'
+import styles from './Share.module.css'
+import Button from '@shared/atoms/Button'
+
+export default function Share({
+  accountId
+}: {
+  accountId: string
+}): ReactElement {
+  function copyLink() {
+    navigator.clipboard.writeText(window.location.href + '/' + accountId)
+  }
+  return (
+    <div className={styles.share}>
+      <Button className={styles.button} onClick={copyLink} style="text">
+        Share
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx
index a09165606..66c0e88a3 100644
--- a/src/components/Profile/Header/index.tsx
+++ b/src/components/Profile/Header/index.tsx
@@ -5,6 +5,7 @@ import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
 import { useProfile } from '@context/Profile'
+import Share from './Share'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
@@ -35,6 +36,7 @@ export default function AccountHeader({
     <div className={styles.grid}>
       <div>
         <Account accountId={accountId} />
+        <Share accountId={accountId} />
         <Stats accountId={accountId} />
       </div>