Artists showcase

package.json

@@ -23,6 +23,7 @@
     "@trpc/server": "^11.0.0-rc.446",
     "cloudinary": "^2.5.1",
     "geist": "^1.3.0",
+    "ldrs": "^1.0.2",
     "next": "^14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       geist:
         specifier: ^1.3.0
         version: 1.3.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+      ldrs:
+        specifier: ^1.0.2
+        version: 1.0.2
       next:
         specifier: ^14.2.4
         version: 14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1170,6 +1173,9 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  ldrs@1.0.2:
+    resolution: {integrity: sha512-sYJmivdkIiHrUEqTrEWccBoLdaENpzbzkABI5rk8rRxTXrg9i2xVuDvUUuhOhJY3RmQyaoxs046pM1DCRdcIpg==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2559,8 +2565,8 @@ snapshots:
       '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
       eslint-plugin-react: 7.37.1(eslint@8.57.1)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
@@ -2579,37 +2585,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -2620,7 +2626,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -3109,6 +3115,8 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  ldrs@1.0.2: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1

src/app/_components/ai-loader.tsx

@@ -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>
+//   );
+// }

src/app/_components/artist-showcase.tsx

@@ -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">
+      <div
-        <img className="h-56 w-56 object-fill" src={imageSource} alt={name} />
+        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>