feat: icons in buttons

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>
   );

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">

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>