commit

components/Body.tsx

@@ -0,0 +1,11 @@
+import styles from 'styles/Home.module.scss'
+
+const Body = ({children}: {children: any}) => {
+    return(
+        <div className={styles.bodySection}>
+            {children}
+        </div>
+    )
+}
+
+export default Body

components/Icon.tsx

@@ -0,0 +1,35 @@
+import toast, { Toaster } from 'react-hot-toast';
+import copy from 'copy-to-clipboard'
+
+const Icon = ({icon, reference, copy = false} : {icon: any, reference: any, copy?: boolean}) => {
+    return(
+        <>
+            { 
+                copy ? (
+                    <a onClick={() => doThings(reference)}>
+                        {icon}
+                    </a>
+                ) : (
+                    <a href={reference} target='_blank' rel='noopener noreferrer' aria-label="Icon">
+                        {icon}
+                    </a>
+                )
+            }
+            <Toaster position='bottom-left' reverseOrder={false} />
+        </>
+    )
+}
+
+const doThings = (value: any) => {
+    copy(value)
+    toast.remove()
+    toast.success('Successfully copied to clipboard', {
+        style: {
+            background: '#111',
+            color: '#fff',
+            fontSize: '1.1rem'
+        }
+    })
+}
+
+export default Icon

components/IconLayout.tsx

@@ -0,0 +1,13 @@
+import styles from 'styles/Home.module.scss'
+
+const IconLayout = ({children}: {children: any}) => {
+    return(
+        <>
+            <div className={styles.iconLayout}>
+                {children}
+            </div>
+        </>
+    )
+}
+
+export default IconLayout

components/MainLayout.tsx

@@ -0,0 +1,14 @@
+import styles from 'styles/Home.module.scss'
+
+const MainLayout = () => {
+    return(
+        <>
+            <div className={styles.mainLayout}>
+                <h1>albert</h1>
+                <p>17-year-old <b>system administrator</b> and student from Hungary</p>
+            </div>
+        </>
+    )
+}
+
+export default MainLayout

components/Spotify.tsx

@@ -0,0 +1,31 @@
+import { useLastFM } from 'use-last-fm'
+import { FaSpotify } from 'react-icons/fa'
+import styles from 'styles/Home.module.scss'
+
+const Spotify = () => {
+    const lastFM = useLastFM('albrtadam', 'f6d19bc25ca340225c70c3d386cd4eab');
+
+    return(
+        <div className={styles.spotify}>
+            {lastFM.status === 'playing'
+                ?
+                <>
+                    <a href={lastFM.song.url} target='_blank' rel='noopener noreferrer'>
+                        <img src={lastFM.song.art} width={50} height={50} alt=""/>
+                        <p>Listening to <b>{lastFM.song.name}</b></p>
+                    </a>
+                </>
+                :
+                <>
+                    <img src='song_art.png' width={50} height={50} alt=""/>
+                    <p>Not listening to anything</p>
+                </>
+            }
+            <div className={styles.tinyText}>
+                <FaSpotify /> Spotify
+            </div>
+        </div>
+    )
+}
+
+export default Spotify

components/Time.tsx

@@ -0,0 +1,26 @@
+import { FaClock } from 'react-icons/fa';
+import { dayjs } from 'components/dayjs'
+import { useEffect, useState } from 'react'
+import styles from 'styles/Home.module.scss'
+
+const now = () => dayjs().tz()
+
+const format = 'hhA'
+
+const Time = () => {
+  const [date, setDate] = useState(now())
+
+  useEffect(() => {
+    const timer = setInterval(() => setDate(now()), 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <p className={styles.time}>
+      <FaClock />
+      {' '}{date.format('DD/MM/YYYY • h:mm:ss A')}
+    </p>
+  )
+}
+
+export default Time

components/Weather.tsx

@@ -0,0 +1,28 @@
+import styles from 'styles/Home.module.scss'
+import { FaSun, FaMoon, FaCloudSun, FaCloudMoon, FaCloud, FaCloudShowersHeavy } from 'react-icons/fa'
+import { BsCloudDrizzleFill, BsCloudsFill, BsCloudLightningFill, BsCloudSnowFill, BsCloudFogFill } from 'react-icons/bs' 
+
+const Weather = ({data}: {data: any}) => {
+    const { temp: temperature } = data.main
+    const { icon: weatherIcon, description: weatherDescription} = data.weather[0]
+
+    const icons: any = {
+        _01d: <FaSun />, _01n: <FaMoon />,
+        _02d: <FaCloudSun />, _02n: <FaCloudMoon />,
+        _03d: <FaCloud />, _03n: <FaCloud />,
+        _04d: <BsCloudsFill />, _04n: <BsCloudsFill />,
+        _09d: <BsCloudDrizzleFill />, _09n: <BsCloudDrizzleFill />,
+        _10d: <FaCloudShowersHeavy />, _10n: <FaCloudShowersHeavy />,
+        _11d: <BsCloudLightningFill />, _11n: <BsCloudLightningFill />,
+        _13d: <BsCloudSnowFill />, _13n: <BsCloudSnowFill />,
+        _50d: <BsCloudFogFill />, _50n: <BsCloudFogFill />
+    }
+
+    return (
+        <div className={styles.weather}>
+            {icons[`_${weatherIcon}`]} <p>It&apos;s currently <b>{parseInt(temperature)} °C</b> <span>({weatherDescription})</span> in <a href='https://weather.com/en-GB/weather/today/l/b979f874d2f515646f37e2bb434a85cc04869c5a35c6bdf1c6fba26f659313f0' target="_blank" rel='noopener noreferrer'><b>Budapest</b></a></p>
+        </div>
+    )
+}
+
+export default Weather

components/dayjs.ts

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.tz.setDefault('Europe/Budapest')
+
+export { dayjs }