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

🔥

Browse source
This commit is contained in:
skidoodle 2022-04-02 23:50:59 +02:00
parent f5bd3b6857
commit 29312048df
8 changed files with 37 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/Icon.tsx
View file

@ -1,4 +1,3 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import toast, { Toaster } from 'react-hot-toast'; import toast, { Toaster } from 'react-hot-toast';
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
@ -8,11 +7,11 @@ const Icon = ({icon, reference, copy = false} : {icon: any, reference: any, copy
{ {
copy ? ( copy ? (
<a onClick={() => doThings(reference)}> <a onClick={() => doThings(reference)}>
<FontAwesomeIcon icon={icon} /> {icon}
</a> </a>
) : ( ) : (
<a href={reference} target='_blank' rel='noopener noreferrer' aria-label="Icon"> <a href={reference} target='_blank' rel='noopener noreferrer' aria-label="Icon">
<FontAwesomeIcon icon={icon} /> {icon}
</a> </a>
) )
} }

4
components/Time.tsx
View file

@ -1,4 +1,4 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FaClock } from 'react-icons/fa';
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import styles from 'styles/Home.module.scss' import styles from 'styles/Home.module.scss'
@ -14,7 +14,7 @@ const Timer = () => {
return( return(
<div className={styles.time}> <div className={styles.time}>
<p><FontAwesomeIcon icon={['fas', 'clock']} /> {date.toLocaleDateString('en-GB', { dateStyle: 'short' }) + ' • ' + date.toLocaleTimeString('en-GB', { timeStyle: 'medium', hour12: true, timeZone: 'Europe/Budapest'}).toUpperCase()}</p> <p><FaClock /> {date.toLocaleDateString('en-GB', { dateStyle: 'short' }) + ' • ' + date.toLocaleTimeString('en-GB', { timeStyle: 'medium', hour12: true, timeZone: 'Europe/Budapest'}).toUpperCase()}</p>
</div> </div>
) )
} }

23
components/Weather.tsx
View file

@ -1,25 +1,26 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import styles from 'styles/Home.module.scss' 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 Weather = ({data}: {data: any}) => {
const { temp: temperature } = data.main const { temp: temperature } = data.main
const { icon: weatherIcon, description: weatherDescription} = data.weather[0] const { icon: weatherIcon, description: weatherDescription} = data.weather[0]
const icons: any = { const icons: any = {
_01d: ['fas', 'sun'], _01n: ['fas', 'moon'], _01d: <FaSun />, _01n: <FaMoon />,
_02d: ['fas', 'cloud-sun'], _02n: ['fas', 'cloud-moon'], _02d: <FaCloudSun />, _02n: <FaCloudMoon />,
_03d: ['fas', 'cloud'], _03n: ['fas', 'cloud'], _03d: <FaCloud />, _03n: <FaCloud />,
_04d: ['fas', 'clouds'], _04n: ['fas', 'clouds'], _04d: <BsCloudsFill />, _04n: <BsCloudsFill />,
_09d: ['fas', 'cloud-drizzle'], _09n: ['fas', 'cloud-drizzle'], _09d: <BsCloudDrizzleFill />, _09n: <BsCloudDrizzleFill />,
_10d: ['fas', 'cloud-showers-heavy'], _10n: ['fas', 'cloud-showers-heavy'], _10d: <FaCloudShowersHeavy />, _10n: <FaCloudShowersHeavy />,
_11d: ['fas', 'cloud-bolt-sun'], _11n: ['fas', 'cloud-bolt-moon'], _11d: <BsCloudLightningFill />, _11n: <BsCloudLightningFill />,
_13d: ['fas', 'snow-flake'], _13n: ['fas', 'snow-flake'], _13d: <BsCloudSnowFill />, _13n: <BsCloudSnowFill />,
_50d: ['fas', 'cloud-fog'], _50n: ['fas', 'cloud-fog'] _50d: <BsCloudFogFill />, _50n: <BsCloudFogFill />
} }
return ( return (
<div className={styles.weather}> <div className={styles.weather}>
<FontAwesomeIcon icon={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> {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> </div>
) )
} }

9
package.json
View file

@ -9,18 +9,15 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@swc/core": "^1.2.160", "@swc/core": "^1.2.160",
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
"csstype": "^3.0.10",
"goober": "2.1.8",
"next": "12.1.1", "next": "12.1.1",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-hot-toast": "^2.2.0", "react-hot-toast": "^2.2.0",
"goober": "2.1.8", "react-icons": "^4.3.1",
"csstype": "^3.0.10",
"sass": "^1.49.9", "sass": "^1.49.9",
"use-last-fm": "^0.6.1" "use-last-fm": "^0.6.1"
}, },

9
pages/_app.tsx
View file

@ -1,14 +1,5 @@
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { config, library } from '@fortawesome/fontawesome-svg-core';
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import 'styles/globals.scss' import 'styles/globals.scss'
import '@fortawesome/fontawesome-svg-core/styles.css'
library.add(fab, fas)
config.autoAddCss = false
const MyApp = ({ Component, pageProps }: AppProps) => { const MyApp = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} /> return <Component {...pageProps} />

13
pages/index.tsx
View file

@ -8,6 +8,9 @@ import MainLayout from 'components/MainLayout'
import Spotify from 'components/Spotify' import Spotify from 'components/Spotify'
import Time from 'components/Time' import Time from 'components/Time'
import Weather from 'components/Weather' import Weather from 'components/Weather'
import { FaSteam, FaGithub, FaEnvelope } from 'react-icons/fa'
import { RiInstagramFill } from 'react-icons/ri'
import { SiDiscord } from 'react-icons/si'
const Home = ({data}: any) => { const Home = ({data}: any) => {
return( return(
@ -18,11 +21,11 @@ const Home = ({data}: any) => {
<Body> <Body>
<MainLayout /> <MainLayout />
<IconLayout> <IconLayout>
<Icon icon={['fab', 'discord']} reference={'albert#8838'} copy={true} /> <Icon icon={<FaGithub />} reference={'https://github.com/skidoodle'} copy={false} />
<Icon icon={['fab', 'steam']} reference={'https://steamcommunity.com/id/_albert'} copy={false} /> <Icon icon={<FaSteam />} reference={'https://steamcommunity.com/id/_albert'} copy={false} />
<Icon icon={['fab', 'github']} reference={'https://github.com/skidoodle'} copy={false} /> <Icon icon={<FaEnvelope />} reference={'hello@albrt.hu'} copy={true} />
<Icon icon={['fa', 'envelope']} reference={'hello@albrt.hu'} copy={true} /> <Icon icon={<RiInstagramFill />} reference={'https://instagram.com/albertadam_'} copy={false} />
<Icon icon={['fab', 'instagram']} reference={'https://instagram.com/albertadam_'} copy={false} /> <Icon icon={<SiDiscord />} reference={'albert#8838'} copy={true} />
</IconLayout> </IconLayout>
<Time /> <Time />
<Weather data={data}/> <Weather data={data}/>

9
styles/Home.module.scss
View file

@ -27,7 +27,7 @@
margin-bottom: 5%; margin-bottom: 5%;
svg { svg {
font-size: 1.2em; font-size: 1.4em;
cursor: pointer; cursor: pointer;
margin-right: 7%; margin-right: 7%;
margin-bottom: 1em; margin-bottom: 1em;
@ -53,7 +53,7 @@
.weather { .weather {
opacity: 0; opacity: 0;
animation-delay: 0.5s; animation-delay: 0.5s;
img { img {
float: left; float: left;
} }
@ -62,9 +62,10 @@
display: inline; display: inline;
} }
a { span {
font-size: 1em; font-size: .8rem;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
color: #C7D2FE; color: #C7D2FE;

5
yarn.lock
View file

@ -1573,6 +1573,11 @@ react-hot-toast@^2.2.0:
dependencies: dependencies:
goober "^2.1.1" goober "^2.1.1"
react-icons@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
react-is@^16.13.1: react-is@^16.13.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"