Initial commit

src/components/Icon.tsx

@@ -0,0 +1,51 @@
+import { socials } from '@/components/data/Socials'
+import copy from 'copy-to-clipboard'
+import toast from 'react-hot-toast'
+import Link from 'next/link'
+
+type Icon = {
+  children: React.ReactNode
+  reference: string
+  copyValue?: boolean
+}
+
+const notify = () => {
+  toast.remove(),
+    toast.success('Copied to clipboard', {
+      style: {
+        background: '#0f1012',
+        color: '#fff',
+        fontSize: '1em',
+      },
+    })
+}
+
+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>
+    )
+  }
+
+  return (
+    <Link
+      href={reference}
+      target='_blank'
+      className={'cursor-pointer'}
+      aria-label={socials.find((social) => social.ref === reference)?.ariaLabel}
+    >
+      {children}
+    </Link>
+  )
+}

src/components/SocialLayout.tsx

@@ -0,0 +1,22 @@
+import { socials } from '@/components/data/Socials'
+import { Icon } from '@/components/Icon'
+import React from 'react'
+
+export const SocialLayout = () => {
+  return (
+    <div className='mt-3 grid w-48 grid-flow-col space-x-8 pl-1 text-2xl'>
+      {socials.map((social) => (
+        <Icon
+          key={social.id}
+          reference={social.ref}
+          copyValue={social.copyValue}
+        >
+          {React.createElement(social.icon, {
+            className:
+              'fill-current focus:outline-none transition duration-300 ease-in-out hover:text-[#ad87ed]',
+          })}
+        </Icon>
+      ))}
+    </div>
+  )
+}

src/components/SpotifyCard.tsx

@@ -0,0 +1,61 @@
+import { HiMusicNote } from 'react-icons/hi'
+import { truncate } from '@/utils/truncate'
+import { useEffect, useState } from 'react'
+import io from 'socket.io-client'
+import Image from 'next/image'
+import Link from 'next/link'
+
+interface SpotifyData {
+  song?: {
+    artist: string[]
+    title: string
+    url: string
+    image: string
+  }
+}
+
+export const NowPlayingCard = () => {
+  const [spotify, setSpotify] = useState<SpotifyData>({})
+
+  useEffect(() => {
+    const socket = io('wss://ws.albert.lol')
+
+    socket.on('nowPlayingData', (data) => {
+      setSpotify(data as SpotifyData)
+    })
+
+    return () => {
+      socket.disconnect()
+    }
+  }, [])
+
+  return (
+    <div className='mt-5 flex max-w-sm transform flex-row rounded-md border border-gray-800 p-3 shadow transition duration-300 ease-in-out hover:scale-105 focus:outline-none'>
+      {spotify.song ? (
+        <Image
+          height={45}
+          width={45}
+          alt='Song cover art'
+          quality={100}
+          className='select-none rounded-md'
+          draggable={false}
+          src={spotify.song.image}
+        />
+      ) : (
+        <HiMusicNote size={45} className='p-2.5' />
+      )}
+      <div className='my-auto ml-4'>
+        <div className='text-l sm:text-regular font-semibold'>
+          Listening to{' '}
+          {spotify.song ? (
+            <Link href={`${spotify.song.url}`} target='_blank'>
+              {truncate(`${spotify.song.title}`, 20)}
+            </Link>
+          ) : (
+            <span>nothing</span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/ThemeSwitcher.tsx

@@ -0,0 +1,35 @@
+import { BsSunFill, BsMoonFill } from 'react-icons/bs'
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  const toggle = () => {
+    if (theme === 'dark') {
+      setTheme('light')
+    } else {
+      setTheme('dark')
+    }
+  }
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
+  return (
+    <button
+      aria-label='Switch Theme'
+      type='button'
+      className='ml-auto mr-5 mt-5 flex'
+      onClick={() => toggle()}
+    >
+      {theme === 'light' ? (
+        <BsMoonFill style={{ fill: 'black' }} size={25} />
+      ) : (
+        <BsSunFill size={25} />
+      )}
+    </button>
+  )
+}

src/components/data/Socials.ts

@@ -0,0 +1,46 @@
+import { FaDiscord, FaEnvelope, FaGithub, FaSteam } from 'react-icons/fa'
+import { RiInstagramFill } from 'react-icons/ri'
+import type { IconType } from 'react-icons/lib'
+
+type Socials = {
+  id: number
+  ref: string
+  icon: IconType
+  copyValue?: boolean
+  ariaLabel?: string
+}
+
+export const socials: Array<Socials> = [
+  {
+    id: 1,
+    ref: 'https://github.com/skidoodle',
+    icon: FaGithub as IconType,
+    ariaLabel: 'GitHub',
+  },
+  {
+    id: 2,
+    ref: 'https://steamcommunity.com/id/_albert',
+    icon: FaSteam as IconType,
+    ariaLabel: 'Steam',
+  },
+  {
+    id: 3,
+    ref: 'contact@albert.lol',
+    icon: FaEnvelope as IconType,
+    copyValue: true,
+    ariaLabel: 'Email',
+  },
+  {
+    id: 4,
+    ref: 'https://www.instagram.com/albertadam_/',
+    icon: RiInstagramFill as IconType,
+    ariaLabel: 'Instagram',
+  },
+  {
+    id: 5,
+    ref: 'albert.lol',
+    icon: FaDiscord as IconType,
+    copyValue: true,
+    ariaLabel: 'Discord',
+  },
+]