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 changes

Browse source
This commit is contained in:
skidoodle 2023-04-11 04:17:14 +02:00
parent f797a18a59
commit 56e6282f68
4 changed files with 36 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/MainLayout.tsx
View file

@ -12,7 +12,7 @@ export const MainLayout = () => {
<div className='ml-[10%] mr-[10%]'> <div className='ml-[10%] mr-[10%]'>
<div className='flex flex-col max-w-3xl mx-auto mb-16 mt-32'> <div className='flex flex-col max-w-3xl mx-auto mb-16 mt-32'>
<h1 className='text-7xl font-bold'>albert</h1> <h1 className='text-7xl font-bold'>albert</h1>
<p className='text-2xl text-gray-600 dark:text-gray-400 mt-2 font-semibold'> <p className='text-2xl text-gray-600 mt-2 font-semibold'>
{Math.floor( {Math.floor(
(new Date().getTime() - new Date('2004-07-22').getTime()) / (new Date().getTime() - new Date('2004-07-22').getTime()) /
(1000 * 60 * 60 * 24 * 365.25), (1000 * 60 * 60 * 24 * 365.25),

24
src/components/SocialLayout.tsx
View file

@ -4,18 +4,16 @@ import React from 'react';
export const SocialLayout = () => { export const SocialLayout = () => {
return ( return (
<> <div className='grid grid-flow-col w-48 mt-3 text-2xl space-x-8'>
<div className='grid grid-flow-col w-48 mt-3 text-2xl space-x-8'> {socials.map((social) => (
{socials.map((social) => ( <Icon
<Icon key={social.id}
key={social.id} reference={social.ref}
reference={social.ref} copyValue={social.copyValue}
copyValue={social.copyValue} >
> {React.createElement(social.icon)}
{React.createElement(social.icon)} </Icon>
</Icon> ))}
))} </div>
</div>
</>
); );
}; };

52
src/components/SpotifyCard.tsx
View file

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

6
src/pages/index.tsx
View file

@ -1,9 +1,5 @@
import { MainLayout } from '@/components/MainLayout'; import { MainLayout } from '@/components/MainLayout';
export default function Home () { export default function Home () {
return ( return <MainLayout />;
<>
<MainLayout />
</>
);
} }