57 lines
2.7 KiB
TypeScript
57 lines
2.7 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { useLanyardWS } from 'use-lanyard';
|
|
// import data from '../data.ts';
|
|
|
|
|
|
export const Whoami = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const data = useLanyardWS('821421438719492136', {
|
|
api: { hostname: 'api.lanyard.alekswilc.dev', secure: true }
|
|
});
|
|
|
|
const customStatus = data && data.activities.find(x => x.id === 'custom');
|
|
|
|
|
|
|
|
return <div className="flex flex-col md:flex-row gap-4 ">
|
|
<div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
|
|
<h1 className='text-xl font-bold'>{t('landing.title')}</h1>
|
|
|
|
<p className='font-light'>{t('landing.whoami')}</p>
|
|
</div>
|
|
|
|
{ data && <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
|
|
<div className="flex flex-row gap-6">
|
|
<div className="flex-col justify-center hidden md:flex">
|
|
<img src="https://www.alekswilc.dev/avatar.jpg" alt="avatar" className='max-w-42 rounded-xl' />
|
|
</div>
|
|
<div className='flex flex-col justify-center'>
|
|
<h1 className='text-xl font-bold'>{data.discord_user.global_name} - Discord Profile</h1>
|
|
|
|
<div className="flex flex-col justify-center">
|
|
{
|
|
customStatus &&
|
|
<p className='font-extralight text-gray-300'>{customStatus.state}</p>
|
|
}
|
|
{
|
|
data.spotify &&
|
|
<>
|
|
<p className='font-bold'>{t("landing.discord.listening")}</p>
|
|
<p className='font-light'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
|
|
</>
|
|
}
|
|
{
|
|
data.activities.filter(x => x.name !== 'Spotify' && x.id !== 'custom').sort((a, b) => a.state ? b.state ? 1 : -1 : -1).map((activity) =>
|
|
<>
|
|
<p className='font-bold'>{t("landing.discord.playing", { app: `${activity.name}${activity.state ? ':' : ''}` })}</p>
|
|
{activity.details && <p className='font-light'>{activity.state ? `${activity.state} - ${activity.details}` : activity.details }</p>}
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> }
|
|
</div>;
|
|
} |