diff --git a/package.json b/package.json index 27300b1..3277cc0 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3be2ba7..e358b40 100644 --- a/pnpm-lock.yaml +++ b/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-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-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)(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 diff --git a/src/app/_components/ai-loader.tsx b/src/app/_components/ai-loader.tsx new file mode 100644 index 0000000..1c999e6 --- /dev/null +++ b/src/app/_components/ai-loader.tsx @@ -0,0 +1,231 @@ +// "use client"; + +// import { motion } from "framer-motion"; + +// const StarComponent1 = ({ size, color, index }) => { +// return ( +// +// +// +// +// +// +// +// +// +// ); +// }; + +// const StarComponent2 = ({ size, color, index }) => { +// return ( +// +// +// +// +// +// +// +// +// +// ); +// }; + +// const StarComponent3 = ({ size, color, index }) => { +// return ( +// +// +// +// +// +// +// +// +// +// ); +// }; + +// export function AiLoader({ size, color }) { +// return ( +//
+// {/* {[...Array(3)].map((_, index) => ( +// +// +// +// +// +// +// +// +// +// ))} */} +// +// +// +//
+// ); +// } diff --git a/src/app/_components/artist-showcase.tsx b/src/app/_components/artist-showcase.tsx index ab9df81..5502f17 100644 --- a/src/app/_components/artist-showcase.tsx +++ b/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 ( -
- {name} +
setShowSpookyImage(!showSpookyImage)} + > + {name} + {!!spookyImageSource && ( + { + if (!spookyImageLoaded) { + setSpookyImageLoaded(true); + } + }} + src={spookyImageSource} + alt={name} + /> + )} + {showSpookyImage && !spookyImageLoaded && ( +
+
+ {generateSpookyImage.data ? ( + <> + +

Generating...

+ + ) : ( + <> + +

Getting image...

+ + )} +
+
+ )}

- {name} + {name}