yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-10 14:08:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Showing Spotify album art on card

Browse Source
This commit is contained in:
Sumire Isshiki 2024-01-23 09:00:23 +09:00
parent 9f2171c41e
commit 7f1ef366e2
3 changed files with 54 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Card.tsx
View File

@ -1,23 +1,68 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
import { faPhone } from '@fortawesome/free-solid-svg-icons'
import { faPhone, faMusic } from '@fortawesome/free-solid-svg-icons'
import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
import NowPlaying from "./NowPlaying"
import { useState, useEffect } from 'react';
import Logo from "./Logo"
interface NowPlaying {
album?: string
artist?: string
isPlaying: boolean
title?: string
link?: string
album_art?: string
}
export default function Card() {
const [np, setNp] = useState<NowPlaying>();
useEffect(() => {
fetch(
"https://vercel-spotify-api.vercel.app/api/Spotify"
)
.then(res => res.json())
.then(data => {
if (data) {
setNp(data)
}
})
})
return (
<>
<div>
<div
className="absolute opacity-20 -z-10 blur-sm"
style={np && np.isPlaying ? {
height: `89%`,
width: `170%`,
left: `-30%`,
backgroundImage: `url(${np.album_art})`,
backgroundColor: `rgba(255, 255, 255, 0.2)`,
backgroundBlendMode: `lighten`
} : {}}
></div>
<div className="flex justify-center items-center">
<div className="mx-2">
<img className="rounded-full" width={100} height={100} src="./avatar.webp" />
</div>
<div className="mx-2 text-left">
<p className="text-5xl text-white">
<Logo />
<div className="mx-2 text-left h-full">
<Logo />
<p className="text-white mt-2 -mb-1">
{np && np.isPlaying &&
<div className="flex flex-row">
<div className="w-5 text-gray-300">
<FontAwesomeIcon icon={faMusic} />
</div>
<div className="text-left max-w-xs">
<span className="text-gray-300">{np.artist}</span>
<p className="text-lg">{np.title}</p>
</div>
</div>
}
</p>
<p className="text-white mt-2 -mb-1"><NowPlaying /></p>
<div className="text-white mt-2">
<p className="font-mono left-0.5 relative">
<FontAwesomeIcon icon={faEnvelope} className="text-gray-300" />{" "}
@ -46,7 +91,7 @@ export default function Card() {
</div>
</div>
</div>
</>
</div>
)
}

2
src/components/Logo.tsx
View File

@ -5,7 +5,7 @@ export default function Logo() {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="100px"
width="140px"
viewBox="0 0 188 127"
enableBackground="new 0 0 188 127"
xmlSpace="preserve"

47
src/components/NowPlaying.tsx
View File

@ -1,47 +0,0 @@
import { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMusic } from '@fortawesome/free-solid-svg-icons'
export interface NowPlaying {
album?: string
artist?: string
isPlaying: boolean
title?: string
link?: string
album_art?: string
}
export default function NowPlaying() {
const [np, setNp] = useState<NowPlaying>();
useEffect(() => {
fetch(
"https://vercel-spotify-api.vercel.app/api/Spotify"
)
.then(res => res.json())
.then(data => {
if (data) {
setNp(data)
}
})
})
return (
<>
{np && np.isPlaying &&
<div className="flex flex-row">
<div className="w-5 text-gray-300">
<FontAwesomeIcon icon={faMusic} />
</div>
<div className="text-left max-w-xs">
<span className="text-gray-300">{np.artist}</span>
<p className="text-lg">{np.title}</p>
</div>
</div>
}
</>
)
}