Merge pull request #11 from Ifechukwudaniel/artist-detail

Artist detail

packages/nextjs/components/spotify/ArtistCard.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Rating from "./Rating";
+import millify from "millify";
+
+interface IProps {
+  name: string;
+  followers: number;
+  albums: number;
+  location: string;
+  popularity: number;
+  biography: string;
+  following?: boolean;
+}
+
+export default function ArtistCard({ name, followers, albums, location, popularity, biography, following }: IProps) {
+  return (
+    <div className="container w-4/5 mx-auto">
+      <div className="flex justify-between items-center">
+        <div className="flex mb-4 gap-3">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold">{millify(followers)}</h1>
+            <p>Followers</p>
+          </div>
+          <div className="text-center">
+            <h1 className="text-2xl font-bold">{millify(albums)}</h1>
+            <p>Albums</p>
+          </div>
+        </div>
+        <div>
+          <button className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold `}>
+            {" "}
+            {following ? "Unfollow" : "Follow"}
+          </button>
+        </div>
+      </div>
+      <div className="text-center py-8">
+        <h2 className="text-3xl">{name}</h2>
+        <p className="text-sm uppercase">{location}</p>
+        <Rating rating={popularity} />
+        <p className="mt-4 leading-[1.7]"> {biography}</p>
+      </div>
+    </div>
+  );
+}

packages/nextjs/components/ClaimNft.tsx → packages/nextjs/components/spotify/ClaimNft.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
+import Image from "next/image";
 
 interface Task {
   name: string;
   description: string;
   imageUrl: string;
 }
 
-const ClaimNFT: React.FC = () => {
+export default function ClaimNFT() {
   const tasks: Task[] = [
     {
       name: "Groupie",
@@ -68,16 +69,13 @@ const ClaimNFT: React.FC = () => {
         >
           <div className="bg-[#1A1D1F] p-32 min-w-lg mx-auto rounded-lg text-center">
             <h3 className="text-2xl">Congratulations!</h3>
+            <Image src={selectedTask.imageUrl} alt={selectedTask.name} className="w-64 h-64 object-contain mb-4" />
             <button onClick={closeModal}>Close</button>
-            <img src={selectedTask.imageUrl} alt={selectedTask.name} className="w-64 h-64 object-contain mb-4" />
-
             <h3 className="text-2xl font-bold mb-4">{selectedTask.name}</h3>
             <button className="bg-[#9DFF94] text-black px-8 py-2">Mint</button>
           </div>
         </div>
       )}
     </div>
   );
-};
-
-export default ClaimNFT;
+}

packages/nextjs/components/spotify/Rating.tsx

@@ -0,0 +1,17 @@
+interface IProps {
+  rating: number;
+}
+
+export default function Rating({ rating }: IProps) {
+  console.log(rating);
+  return (
+    <div className="rating rating-lg">
+      <input type="radio" name="rating-9" className="rating-hidden" checked={rating <= 0} />
+      <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94]" checked={rating <= 20} />
+      <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" checked={rating <= 40} />
+      <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" checked={rating <= 60} />
+      <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" checked={rating <= 80} />
+      <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" checked={rating <= 100} />
+    </div>
+  );
+}

packages/nextjs/package.json

@@ -26,6 +26,7 @@
     "ethers": "^5.0.0",
     "html-react-parser": "^5.0.7",
     "lodash": "^4.17.21",
+    "millify": "^6.1.0",
     "neverthrow": "^6.1.0",
     "next": "^13.1.6",
     "next-auth": "^4.22.1",

packages/nextjs/pages/artist/[artistId].tsx

@@ -1,22 +1,19 @@
 import { GetServerSideProps } from "next";
 import { getSession } from "next-auth/react";
 import { RiMusic2Fill } from "react-icons/ri";
-import ClaimNFT from "~~/components/ClaimNft";
 import DashboardLayout from "~~/components/dashboard/DashboardLayout";
 import AlbumList from "~~/components/spotify/AlbumList";
+import ArtistCard from "~~/components/spotify/ArtistCard";
 import ArtistList from "~~/components/spotify/ArtistList";
+import ClaimNFT from "~~/components/spotify/ClaimNft";
 import Heading from "~~/components/spotify/Heading";
 import Layout from "~~/components/spotify/Layout";
 import TracksTable from "~~/components/spotify/TracksTable";
 import { MySession } from "~~/types/session";
-import { Album, Artist, Track } from "~~/types/spotify";
+import { Albums, Artist, Track } from "~~/types/spotify";
 import { customGet } from "~~/utils/beat-bridge/customGet";
 import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";
 
-interface Albums {
-  items: Album[];
-}
-
 interface IProps {
   artist: Artist;
   artistTracks: Track[];
@@ -29,6 +26,7 @@ interface IProps {
   };
   userFollowsArtist?: boolean;
   userLikedTracks?: { added_at: string; track: Track }[];
+  totalFollowers?: number;
 }
 
 export default function SingleArtist({
@@ -49,7 +47,6 @@ export default function SingleArtist({
     }
 
     const currentArtistId = artist.id;
-    console.log(userLikedTracks);
     return userLikedTracks?.some(({ track }) => track.artists.some(artist => artist.id === currentArtistId));
   };
 
@@ -71,66 +68,17 @@ export default function SingleArtist({
               </div>
             )}
           </div>
-          <div className="container w-4/5 mx-auto">
-            <div className="flex justify-between items-center">
-              <div className="flex mb-4 gap-6">
-                <div className="text-center">
-                  <h1 className="text-2xl font-bold">22</h1>
-                  <p>Friends</p>
-                </div>
-                <div className="text-center">
-                  <h1 className="text-2xl font-bold">10</h1>
-                  <p>Badges</p>
-                </div>
-                <div className="text-center">
-                  <h1 className="text-2xl font-bold">89</h1>
-                  <p>Comments</p>
-                </div>
-              </div>
-
-              <button
-                className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
-                  userFollowsArtist ? "hidden" : ""
-                }`}
-              >
-                Follow
-              </button>
-
-              <button
-                className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
-                  userFollowsArtist ? "" : "hidden"
-                }`}
-              >
-                Unfollow
-              </button>
-            </div>
-
-            <div className="text-center py-8">
-              <h2 className="text-3xl">{artist.name}</h2>
-              <p className="text-sm uppercase mb-4">LOS ANGELES, CALIFORNIA</p>
-              <div className="rating rating-lg">
-                <input type="radio" name="rating-9" className="rating-hidden" />
-                <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94]" />
-                <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" checked />
-                <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" />
-                <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" />
-                <input type="radio" name="rating-9" className="mask mask-star-2  bg-[#9DFF94] ml-3" />
-              </div>
-              {/*   {isArtistLiked() && (
-                <div className="mt-8">
-                  <p>You liked this artists music!</p>
-                </div>
-              )} */}
-              <p className="mt-4 leading-[1.7]">
-                An artist of considerable range, Jenna the name taken by Melbourne-raised, Brooklyn-based Nick Murphy
-                writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove
-                structure. An artist of considerable range.
-                <span className="text-green-500 cursor-pointer block">Show More</span>
-              </p>
-            </div>
-          </div>
-
-          {/*  */}
+          <ArtistCard
+            name={artist.name}
+            followers={artist?.followers?.total || 0}
+            albums={artistAlbums?.total || 0}
+            location={"LOS ANGELES, CALIFORNIA"}
+            popularity={artist?.popularity || 0}
+            biography={`An artist of considerable range, Jenna the name taken by Melbourne-raised,
+            Brooklyn-based Nick Murphy writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure.
+            An artist of considerable range `}
+            following={userFollowsArtist}
+          />
           <ClaimNFT />
         </div>
         <div className="flex items-end gap-6 hidden">

packages/nextjs/pages/artist/claim.tsx

@@ -1,6 +1,5 @@
 import Head from "next/head";
 import type { NextPage } from "next";
-import ArtistCard from "~~/components/ArtistCard";
 import { Footer } from "~~/components/Footer";
 
 const Home: NextPage = () => {
@@ -10,9 +9,7 @@ const Home: NextPage = () => {
         <title>ARTIST | BEAT BRIDGE</title>
         <meta name="description" content="Created with 🏗 scaffold-eth-2" />
       </Head>
-      <section className="bg-[#000000]">
-        <ArtistCard />
-      </section>
+      <section className="bg-[#000000]"></section>
       <Footer />
     </>
   );

packages/nextjs/types/spotify.ts

@@ -11,6 +11,7 @@ export interface Album {
   images?: [Image];
   album_type?: string;
   release_date?: string;
+  total?: number;
   tracks?: {
     total: number;
     items: Track[];
@@ -24,9 +25,15 @@ export interface Artist {
   followers?: {
     total: number;
   };
+  popularity?: number;
   genres?: [string];
 }
 
+export interface Albums {
+  items: Album[];
+  total?: number;
+}
+
 export interface Track {
   id: string;
   name: string;

packages/noir/circuits/SpotifyVerifier/Nargo.toml

@@ -1,7 +1,7 @@
 [package]
-name = "spotifyVerifier"
+name = "SpotifyVerifier"
 type = "bin"
-authors = [""]
+authors = ["Ifechukwu Daniel"]
 compiler_version = "0.10.5"
 
-[dependencies]
+[dependencies]