.minor tweaks

This commit is contained in:
skidoodle 2023-04-11 04:48:30 +02:00
parent da6a607b5d
commit 9e7e5d00f3
2 changed files with 56 additions and 47 deletions

View file

@ -1,7 +1,8 @@
import { socials } from '@/components/data/Socials';
import Link from 'next/link';
import toast from 'react-hot-toast';
import copy from 'copy-to-clipboard';
import { socials } from '@/components/data/Socials';
import FadeIn from 'react-fade-in';
type Icon = {
children: any;
@ -23,29 +24,35 @@ const notify = () => {
export const Icon = ({ children, reference, copyValue }: Icon) => {
if (copyValue) {
return (
<Link
href={''}
className={`cursor-pointer`}
aria-label={
socials.find((social) => social.ref === reference)?.ariaLabel
}
onClick={() => {
notify(), copy(reference);
}}
>
{children}
</Link>
<FadeIn>
<Link
href={''}
className={`cursor-pointer`}
aria-label={
socials.find((social) => social.ref === reference)?.ariaLabel
}
onClick={() => {
notify(), copy(reference);
}}
>
{children}
</Link>
</FadeIn>
);
}
return (
<Link
href={reference}
target='_blank'
className={'cursor-pointer'}
aria-label={socials.find((social) => social.ref === reference)?.ariaLabel}
>
{children}
</Link>
<FadeIn>
<Link
href={reference}
target='_blank'
className={'cursor-pointer'}
aria-label={
socials.find((social) => social.ref === reference)?.ariaLabel
}
>
{children}
</Link>
</FadeIn>
);
};

View file

@ -1,9 +1,9 @@
import { truncate } from '@/utils/truncate';
import Image from 'next/image';
import useSWR from 'swr';
import SongImage from '@/public/song.webp';
import Link from 'next/link';
import { HiMusicNote } from 'react-icons/hi';
import Image from 'next/image';
import Link from 'next/link';
import FadeIn from 'react-fade-in';
import useSWR from 'swr';
export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
@ -14,29 +14,31 @@ export const NowPlayingCard = () => {
});
return (
<div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
{spotify.song ? (
<Image
height={45}
width={45}
alt='Song cover art'
src={spotify.song?.image}
/>
) : (
<HiMusicNote size={45} className='p-2.5' />
)}
<div className='my-auto ml-4'>
<div className='font-semibold text-l sm:text-regular'>
Listening to{' '}
{spotify.song ? (
<Link href={`${spotify.song.url}`} target='_blank'>
{truncate(`${spotify.song.title}`, 20)}
</Link>
) : (
<span>nothing</span>
)}
<FadeIn>
<div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
{spotify.song ? (
<Image
height={45}
width={45}
alt='Song cover art'
src={spotify.song?.image}
/>
) : (
<HiMusicNote size={45} className='p-2.5' />
)}
<div className='my-auto ml-4'>
<div className='font-semibold text-l sm:text-regular'>
Listening to{' '}
{spotify.song ? (
<Link href={`${spotify.song.url}`} target='_blank'>
{truncate(`${spotify.song.title}`, 20)}
</Link>
) : (
<span>nothing</span>
)}
</div>
</div>
</div>
</div>
</FadeIn>
);
};