feat(ui/ux): update ContactSection on portifolio page

mateusfg7 · Apr 24, 2023 · 8648590 · 8648590
1 parent eb7a421
commit 8648590
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 64 deletions.
diff --git a/src/app/portifolio/ContactSection/Contact.tsx b/src/app/portifolio/ContactSection/Contact.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { ArrowSquareOut, Icon as IconType } from '@phosphor-icons/react'
+
+export const Contact: React.FC<{
+  title: string
+  data: string
+  color: string
+  link: string
+  Icon: IconType
+}> = ({ title, Icon, data, color, link }) => {
+  const [isHover, setIsHover] = useState(false)
+
+  return (
+    <div className="flex items-center text-xl text-neutral-200 border-b border-b-neutral-800 last:border-none">
+      <div
+        className="flex items-center gap-2 w-40 text-2xl h-full mr-7"
+        style={{
+          color
+        }}
+      >
+        <Icon weight="duotone" />
+        <span>{title}</span>
+      </div>
+      <div className="w-72 flex items-center h-full mr-20">
+        <span>{data}</span>
+      </div>
+      <div
+        className="group hover:cursor-pointer flex items-center text-3xl py-6"
+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}
+      >
+        <a href={link} target="_blank" rel="noreferrer">
+          <ArrowSquareOut
+            color={isHover ? color : 'rgb(229 229 229)'}
+            weight={isHover ? 'bold' : 'regular'}
+          />
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/portifolio/ContactSection/contact-list.tsx b/src/app/portifolio/ContactSection/contact-list.tsx
@@ -0,0 +1,37 @@
+import {
+  Envelope,
+  GithubLogo,
+  LinkedinLogo,
+  WhatsappLogo
+} from '@phosphor-icons/react'
+
+export const contactList = [
+  {
+    title: 'Whatsapp',
+    data: '+55 (37) 99844-0073',
+    link: 'https://wa.me/+5537998440073',
+    color: 'rgb(134 239 172)',
+    icon: WhatsappLogo
+  },
+  {
+    title: 'Email',
+    data: '[email protected]',
+    link: 'mailto:[email protected]',
+    color: 'rgba(252 165 165)',
+    icon: Envelope
+  },
+  {
+    title: 'Linkedin',
+    data: 'mateusfg',
+    link: 'https://linkedin.com/in/mateusfg',
+    color: 'rgb(14 165 233)',
+    icon: LinkedinLogo
+  },
+  {
+    title: 'Github',
+    data: '@mateusfg7',
+    link: 'https://github.com/mateusfg7',
+    color: 'rgb(255 255 255)',
+    icon: GithubLogo
+  }
+]
diff --git a/src/app/portifolio/ContactSection/index.tsx b/src/app/portifolio/ContactSection/index.tsx
@@ -1,9 +1,5 @@
-import {
-  AiOutlineGithub,
-  AiOutlineLinkedin,
-  AiOutlineMail,
-  AiOutlineWhatsApp
-} from 'react-icons/ai'
+import { Contact } from './Contact'
+import { contactList } from './contact-list'
 
 export function ContactSection() {
   return (
@@ -15,62 +11,17 @@ export function ContactSection() {
         <div className="w-full text-center mb-20">
           <h1 className="text-blue-500 text-4xl">Entre em contato!</h1>
         </div>
-        <div className="flex justify-center flex-wrap gap-10">
-          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
-            <h2 className="text-xl text-green-300 flex items-center gap-2">
-              <AiOutlineWhatsApp /> Whatsapp
-            </h2>
-            <span className="text-lg">+55 (37) 99844-0073</span>
-            <a
-              href="https://wa.me/+5537998440073"
-              target="_blank"
-              rel="noreferrer"
-              className="text-green-300 border border-green-300 p-3 rounded-xl hover:bg-green-300/10"
-            >
-              Enviar mensagem
-            </a>
-          </div>
-          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
-            <h2 className="text-xl text-red-300 flex items-center gap-2">
-              <AiOutlineMail /> Email
-            </h2>
-            <span className="text-lg">[email protected]</span>
-            <a
-              href="mailto:[email protected]"
-              target="_blank"
-              rel="noreferrer"
-              className="text-red-300 border border-red-300 p-3 rounded-xl hover:bg-red-300/10"
-            >
-              Enviar mensagem
-            </a>
-          </div>
-          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
-            <h2 className="text-xl text-sky-500 flex items-center gap-2">
-              <AiOutlineLinkedin /> Linkedin
-            </h2>
-            <span className="text-lg">linkedin.com/in/mateusfg</span>
-            <a
-              href="https://linkedin.com/in/mateusfg"
-              target="_blank"
-              rel="noreferrer"
-              className="text-sky-500 border border-sky-500 p-3 rounded-xl hover:bg-sky-500/10"
-            >
-              Visualizar perfil
-            </a>
-          </div>
-          <div className="flex flex-col items-center gap-6 border border-neutral-800 rounded-3xl p-12">
-            <h2 className="text-xl text-stone-200 flex items-center gap-2">
-              <AiOutlineGithub /> Github
-            </h2>
-            <span className="text-lg">github.com/mateusfg7</span>
-            <a
-              href="https://github.com/mateusfg7"
-              target="_blank"
-              rel="noreferrer"
-              className="text-stone-200 border border-stone-200 p-3 rounded-xl hover:bg-stone-200/10"
-            >
-              Visualizar perfil
-            </a>
+        <div className="flex justify-center">
+          <div>
+            {contactList.map(contact => (
+              <Contact
+                title={contact.title}
+                data={contact.data}
+                link={contact.link}
+                color={contact.color}
+                Icon={contact.icon}
+              />
+            ))}
           </div>
         </div>
       </div>

diff --git a/src/app/portifolio/page.tsx b/src/app/portifolio/page.tsx
@@ -6,9 +6,9 @@ import Head from 'next/head'
 import { Header } from './Header'
 import { HomeSection } from './HomeSection'
 import { AboutSection } from './AboutSection'
-import { ContactSection } from './ContactSection'
-import { KnowledgeSection } from './KnowledgeSection'
 import { ProjectsSection } from './ProjectsSection'
+import { KnowledgeSection } from './KnowledgeSection'
+import { ContactSection } from './ContactSection'
 
 export default function Page() {
   const [scrollPosition, setScrollPosition] = useState(0)