From 2ad51ad3d75815d9fb4b8f4c4576418cf3a69f0e Mon Sep 17 00:00:00 2001
From: Aidan Honor <aidan@p0ntus.com>
Date: Wed, 26 Mar 2025 23:19:33 -0400
Subject: [PATCH] feat: icons in buttons

---
 components/objects/Button.tsx | 8 +++++---
 components/pages/About.tsx    | 3 ++-
 components/pages/Home.tsx     | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/objects/Button.tsx b/components/objects/Button.tsx
index ef82124..e6dedbf 100644
--- a/components/objects/Button.tsx
+++ b/components/objects/Button.tsx
@@ -4,14 +4,16 @@ import Link from 'next/link';
 interface MusicInfoButtonProps {
   href: string;
   label: string;
+  icon?: React.ElementType;
 }
 
-const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label }) => {
+const MusicInfoButton: React.FC<MusicInfoButtonProps> = ({ href, label, icon }) => {
   return (
-    <Link 
+    <Link
       href={href}
-      className="inline-block bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
     >
+      {icon && React.createElement(icon, { size: 20, className: "mr-2" })}
       {label}
     </Link>
   );
diff --git a/components/pages/About.tsx b/components/pages/About.tsx
index 2e32cb1..0101b06 100644
--- a/components/pages/About.tsx
+++ b/components/pages/About.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { User } from 'lucide-react'
+import { User, Smartphone } from 'lucide-react'
 import FeaturedRepos from '../widgets/FeaturedRepos'
 import Image from 'next/image'
 import { useState } from 'react'
@@ -52,6 +52,7 @@ export default function About() {
         <Button
           href="/phone"
           label="My Phone"
+          icon={Smartphone}
         />
       </div>
       <div className="mt-12">
diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx
index 003247d..66ea9f0 100644
--- a/components/pages/Home.tsx
+++ b/components/pages/Home.tsx
@@ -5,7 +5,7 @@ import Button from '../objects/Button'
 import LastPlayed from '@/components/widgets/LastPlayed'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-
+import { Mail } from 'lucide-react'
 export default function Home() {
   const { t } = useTranslation();
 
@@ -62,6 +62,7 @@ export default function Home() {
         <Button
           href={'/contact'}
           label={t('home.contact.button')}
+          icon={Mail}
         />
       </section>
     </div>