aidan/aidxnCC
1
1
Fork 0
mirror of https://github.com/ihatenodejs/aidxnCC.git synced 2025-04-25 05:55:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: icons in buttons

Browse Source
This commit is contained in:
Aidan 2025-03-26 23:19:33 -04:00
parent e98a80666f
commit 2ad51ad3d7
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/objects/Button.tsx
View File

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

3
components/pages/About.tsx
View File

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

3
components/pages/Home.tsx
View File

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