mirror of
https://github.com/FranP-code/spooky-spotify-showcase.git
synced 2025-10-13 00:02:36 +00:00
Artists showcase
This commit is contained in:
231
src/app/_components/ai-loader.tsx
Normal file
231
src/app/_components/ai-loader.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
// "use client";
|
||||
|
||||
// import { motion } from "framer-motion";
|
||||
|
||||
// const StarComponent1 = ({ size, color, index }) => {
|
||||
// return (
|
||||
// <motion.div
|
||||
// key={index}
|
||||
// className="absolute"
|
||||
// style={{
|
||||
// top: "0%",
|
||||
// left: "20%",
|
||||
// }}
|
||||
// animate={{
|
||||
// scale: [0, 1, 0],
|
||||
// opacity: [0, 1, 0],
|
||||
// x: [
|
||||
// 0,
|
||||
// (size / 2) * Math.cos((((1 + 1) / 3) * Math.PI) / 3),
|
||||
// (1 * Math.PI) / 3,
|
||||
// ],
|
||||
// y: [0, (size / 2) * Math.sin((1 * Math.PI) / 3), (1 * Math.PI) / 3],
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 2,
|
||||
// repeat: Infinity,
|
||||
// delay: 1 * 0.2,
|
||||
// }}
|
||||
// >
|
||||
// <svg
|
||||
// style={{
|
||||
// width: size / 1.5,
|
||||
// height: size / 1.5,
|
||||
// x: -size / (6 / 1),
|
||||
// // y: -size / 6,
|
||||
// }}
|
||||
// fill={color}
|
||||
// viewBox="0 0 512 512"
|
||||
// id="icons"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
// <g
|
||||
// id="SVGRepo_tracerCarrier"
|
||||
// stroke-linecap="round"
|
||||
// stroke-linejoin="round"
|
||||
// ></g>
|
||||
// <g id="SVGRepo_iconCarrier">
|
||||
// <path d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"></path>
|
||||
// </g>
|
||||
// </svg>
|
||||
// </motion.div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// const StarComponent2 = ({ size, color, index }) => {
|
||||
// return (
|
||||
// <motion.div
|
||||
// key={index}
|
||||
// className="absolute"
|
||||
// style={{
|
||||
// top: "20%",
|
||||
// left: "20%",
|
||||
// }}
|
||||
// animate={{
|
||||
// scale: [0, 1, 0],
|
||||
// opacity: [0, 1, 0],
|
||||
// x: [
|
||||
// 0,
|
||||
// (size / 2) * Math.cos((((2 + 1) / 3) * Math.PI) / 3),
|
||||
// (2 * Math.PI) / 3,
|
||||
// ],
|
||||
// y: [0, (size / 2) * Math.sin((2 * Math.PI) / 3), (2 * Math.PI) / 3],
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 2,
|
||||
// repeat: Infinity,
|
||||
// delay: 2 * 0.2,
|
||||
// }}
|
||||
// >
|
||||
// <svg
|
||||
// style={{
|
||||
// width: size / 1.5,
|
||||
// height: size / 1.5,
|
||||
// x: -size / (6 / 2),
|
||||
// // y: -size / 6,
|
||||
// }}
|
||||
// fill={color}
|
||||
// viewBox="0 0 512 512"
|
||||
// id="icons"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
// <g
|
||||
// id="SVGRepo_tracerCarrier"
|
||||
// stroke-linecap="round"
|
||||
// stroke-linejoin="round"
|
||||
// ></g>
|
||||
// <g id="SVGRepo_iconCarrier">
|
||||
// <path
|
||||
// d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,
|
||||
// 7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"
|
||||
// ></path>
|
||||
// </g>
|
||||
// </svg>
|
||||
// </motion.div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// const StarComponent3 = ({ size, color, index }) => {
|
||||
// return (
|
||||
// <motion.div
|
||||
// key={index}
|
||||
// className="absolute"
|
||||
// style={{
|
||||
// top: "40%",
|
||||
// left: "20%",
|
||||
// }}
|
||||
// animate={{
|
||||
// scale: [0, 1, 0],
|
||||
// opacity: [0, 1, 0],
|
||||
// x: [
|
||||
// 0,
|
||||
// (size / 2) * Math.cos((((3 + 1) / 3) * Math.PI) / 3),
|
||||
// (3 * Math.PI) / 3,
|
||||
// ],
|
||||
// y: [0, (size / 2) * Math.sin((3 * Math.PI) / 3), -(size * 0.3)],
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 2,
|
||||
// repeat: Infinity,
|
||||
// delay: 3 * 0.2,
|
||||
// }}
|
||||
// >
|
||||
// <svg
|
||||
// style={{
|
||||
// width: size / 1.5,
|
||||
// height: size / 1.5,
|
||||
// x: -size / (6 / 3),
|
||||
// // y: -size / 6,
|
||||
// }}
|
||||
// fill={color}
|
||||
// viewBox="0 0 512 512"
|
||||
// id="icons"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
// <g
|
||||
// id="SVGRepo_tracerCarrier"
|
||||
// stroke-linecap="round"
|
||||
// stroke-linejoin="round"
|
||||
// ></g>
|
||||
// <g id="SVGRepo_iconCarrier">
|
||||
// <path
|
||||
// d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,
|
||||
// 7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"
|
||||
// ></path>
|
||||
// </g>
|
||||
// </svg>
|
||||
// </motion.div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export function AiLoader({ size, color }) {
|
||||
// return (
|
||||
// <div className="relative" style={{ width: size, height: size }}>
|
||||
// {/* {[...Array(3)].map((_, index) => (
|
||||
// <motion.div
|
||||
// key={index}
|
||||
// className="absolute"
|
||||
// style={{
|
||||
// top: "20%",
|
||||
// left: "20%",
|
||||
// }}
|
||||
// // style={{
|
||||
// // width: size / 6,
|
||||
// // height: size / 6,
|
||||
// // backgroundColor: color,
|
||||
// // x: -size / 12,
|
||||
// // y: -size / 12,
|
||||
// // }}
|
||||
// animate={{
|
||||
// scale: [0, 1, 0],
|
||||
// opacity: [0, 1, 0],
|
||||
// x: [
|
||||
// 0,
|
||||
// (size / 2) * Math.cos((((index + 1) / 3) * Math.PI) / 3),
|
||||
// (index * Math.PI) / 3,
|
||||
// ],
|
||||
// y: [
|
||||
// 0,
|
||||
// (size / 2) * Math.sin((index * Math.PI) / 3),
|
||||
// (index * Math.PI) / 3,
|
||||
// ],
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 2,
|
||||
// repeat: Infinity,
|
||||
// delay: index * 0.2,
|
||||
// }}
|
||||
// >
|
||||
// <svg
|
||||
// style={{
|
||||
// width: size / 1.5,
|
||||
// height: size / 1.5,
|
||||
// x: -size / (6 / index),
|
||||
// // y: -size / 6,
|
||||
// }}
|
||||
// fill={color}
|
||||
// viewBox="0 0 512 512"
|
||||
// id="icons"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
// <g
|
||||
// id="SVGRepo_tracerCarrier"
|
||||
// stroke-linecap="round"
|
||||
// stroke-linejoin="round"
|
||||
// ></g>
|
||||
// <g id="SVGRepo_iconCarrier">
|
||||
// <path d="M88,176a14.67,14.67,0,0,1-13.69-9.4L57.45,122.76a7.28,7.28,0,0,0-4.21-4.21L9.4,101.69a14.67,14.67,0,0,1,0-27.38L53.24,57.45a7.31,7.31,0,0,0,4.21-4.21L74.16,9.79A15,15,0,0,1,86.23.11,14.67,14.67,0,0,1,101.69,9.4l16.86,43.84a7.31,7.31,0,0,0,4.21,4.21L166.6,74.31a14.67,14.67,0,0,1,0,27.38l-43.84,16.86a7.28,7.28,0,0,0-4.21,4.21L101.69,166.6A14.67,14.67,0,0,1,88,176Z"></path>
|
||||
// </g>
|
||||
// </svg>
|
||||
// </motion.div>
|
||||
// ))} */}
|
||||
// <StarComponent1 size={size} color={color} index={1} />
|
||||
// <StarComponent2 size={size} color={color} index={2} />
|
||||
// <StarComponent3 size={size} color={color} index={3} />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@@ -1,5 +1,13 @@
|
||||
"use client";
|
||||
import { api } from "@/trpc/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Tilt from "react-parallax-tilt";
|
||||
// import { AiLoader } from "./ai-loader";
|
||||
import { quantum } from "ldrs";
|
||||
import { ring2 } from "ldrs";
|
||||
|
||||
ring2.register();
|
||||
quantum.register();
|
||||
|
||||
export default function ArtistShowcase({
|
||||
images,
|
||||
@@ -10,19 +18,119 @@ export default function ArtistShowcase({
|
||||
name: string;
|
||||
id: string;
|
||||
}) {
|
||||
const [showSpookyImage, setShowSpookyImage] = useState(false);
|
||||
const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
|
||||
|
||||
const imageSource = images[0]
|
||||
? images[0].url
|
||||
: "https://via.placeholder.com/150";
|
||||
|
||||
const entry = api.entry.get.useQuery({
|
||||
type: "artist",
|
||||
name,
|
||||
image: imageSource,
|
||||
});
|
||||
|
||||
const generateSpookyImage = api.entry.generate.useMutation();
|
||||
const saveImage = api.entry.save.useMutation();
|
||||
|
||||
const handleGenerateSpookyImage = async () => {
|
||||
if (!entry.data && !entry.isLoading) {
|
||||
generateSpookyImage.mutate({
|
||||
entry: {
|
||||
type: "artist",
|
||||
name,
|
||||
image: imageSource,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveImage = async () => {
|
||||
if (!entry.data && !entry.isLoading) {
|
||||
saveImage.mutate({
|
||||
entry: {
|
||||
type: "artist",
|
||||
image: imageSource,
|
||||
name,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleGenerateSpookyImage();
|
||||
}, [entry.data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (spookyImageLoaded) {
|
||||
handleSaveImage();
|
||||
}
|
||||
}, [spookyImageLoaded]);
|
||||
|
||||
const spookyImageMatch = (
|
||||
(entry.data?.value || generateSpookyImage.data) as null | string
|
||||
)?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
|
||||
const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
|
||||
|
||||
return (
|
||||
<Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
|
||||
<div className="mb-2 w-56 cursor-pointer overflow-hidden rounded-md border-2 border-slate-700">
|
||||
<img className="h-56 w-56 object-fill" src={imageSource} alt={name} />
|
||||
<div
|
||||
className="mb-2 w-56 cursor-pointer overflow-hidden rounded-md border-2 border-slate-700 bg-slate-300 bg-opacity-10"
|
||||
onClick={() => setShowSpookyImage(!showSpookyImage)}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
display: showSpookyImage ? "none" : "block",
|
||||
}}
|
||||
className="h-56 w-56 object-fill"
|
||||
src={imageSource}
|
||||
alt={name}
|
||||
/>
|
||||
{!!spookyImageSource && (
|
||||
<img
|
||||
style={{
|
||||
display: showSpookyImage && spookyImageLoaded ? "block" : "none",
|
||||
}}
|
||||
className="h-56 w-56 object-fill"
|
||||
onLoad={() => {
|
||||
if (!spookyImageLoaded) {
|
||||
setSpookyImageLoaded(true);
|
||||
}
|
||||
}}
|
||||
src={spookyImageSource}
|
||||
alt={name}
|
||||
/>
|
||||
)}
|
||||
{showSpookyImage && !spookyImageLoaded && (
|
||||
<div className="flex h-56 w-56 items-center justify-center">
|
||||
<div>
|
||||
{generateSpookyImage.data ? (
|
||||
<>
|
||||
<l-quantum size="165" speed="1.75" color="white"></l-quantum>
|
||||
<p className="text-center">Generating...</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<l-ring-2
|
||||
size="165"
|
||||
stroke="5"
|
||||
stroke-length="0.25"
|
||||
bg-opacity="0.1"
|
||||
speed="0.8"
|
||||
color="white"
|
||||
></l-ring-2>
|
||||
<p className="text-center">Getting image...</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<p
|
||||
className="w-full truncate break-all border-t-2 border-slate-300 bg-slate-200 p-2 text-center text-sm font-medium text-slate-700"
|
||||
title={name}
|
||||
>
|
||||
{name}
|
||||
<span className="cursor-default">{name}</span>
|
||||
</p>
|
||||
</div>
|
||||
</Tilt>
|
||||
|
||||
Reference in New Issue
Block a user