albert/albert.lol
1
0
Fork 0
mirror of https://github.com/skidoodle/albert.lol.git synced 2025-02-15 06:09:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

.minor tweaks

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

49
src/components/Icon.tsx
View file

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

54
src/components/SpotifyCard.tsx
View file

@ -1,9 +1,9 @@
import { truncate } from '@/utils/truncate'; 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 { 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()); export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
@ -14,29 +14,31 @@ export const NowPlayingCard = () => {
}); });
return ( 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'> <FadeIn>
{spotify.song ? ( <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'>
<Image {spotify.song ? (
height={45} <Image
width={45} height={45}
alt='Song cover art' width={45}
src={spotify.song?.image} alt='Song cover art'
/> src={spotify.song?.image}
) : ( />
<HiMusicNote size={45} className='p-2.5' /> ) : (
)} <HiMusicNote size={45} className='p-2.5' />
<div className='my-auto ml-4'> )}
<div className='font-semibold text-l sm:text-regular'> <div className='my-auto ml-4'>
Listening to{' '} <div className='font-semibold text-l sm:text-regular'>
{spotify.song ? ( Listening to{' '}
<Link href={`${spotify.song.url}`} target='_blank'> {spotify.song ? (
{truncate(`${spotify.song.title}`, 20)} <Link href={`${spotify.song.url}`} target='_blank'>
</Link> {truncate(`${spotify.song.title}`, 20)}
) : ( </Link>
<span>nothing</span> ) : (
)} <span>nothing</span>
)}
</div>
</div> </div>
</div> </div>
</div> </FadeIn>
); );
}; };