Merge pull request #6 from Ifechukwudaniel/dashboard-ui

Dashboard UI
Ifechukwudaniel · Dec 15, 2023 · 0babb5a · 0babb5a
2 parents 4e327b1 + 94c0e82
commit 0babb5a
Show file tree

Hide file tree

Showing 23 changed files with 768 additions and 32 deletions.
diff --git a/packages/nextjs/components/ClaimNft.tsx b/packages/nextjs/components/ClaimNft.tsx
@@ -47,13 +47,13 @@ const ClaimNFT: React.FC = () => {
 
   return (
     <div className="flex justify-center">
-      <div className="w-full max-w-screen-lg rounded bg-black">
+      <div className="w-full max-w-screen-lg rounded-lg bg-black">
         {tasks.map((task, index) => (
-          <div key={index} className=" p-6 px-6 flex items-center justify-between gap-12">
-            <h3 className="text-xl font-bold">{task.name}</h3>
-            <p className="text-xl text-center font-light">{task.description}</p>
+          <div key={index} className=" p-6 px-6 flex items-center  justify-between gap-12">
+            <h3 className="w-[20%] font-bold uppercase">{task.name}</h3>
+            <p className="text-xl font-light text-center">{task.description}</p>
 
-            <button className="bg-[#856F7A] text-white px-4 py-2 rounded" onClick={() => openModal(task)}>
+            <button className="bg-[#5D41A8] text-white px-4 py-2 rounded" onClick={() => openModal(task)}>
               Claim
             </button>
           </div>

diff --git a/packages/nextjs/components/dashboard/DashboardLayout.tsx b/packages/nextjs/components/dashboard/DashboardLayout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Header from "./Header";
+import Header from "../spotify/Header";
 import Sidebar from "./Sidebar";
 
 interface DashboardLayoutProps {
@@ -13,7 +13,7 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
 
       <div className="flex flex-col flex-1">
         <Header />
-        <main className="px-12 py-8 bg-[#111315] min-h-full h-full overflow-y-auto">{children}</main>
+        <main className="px-12 py-8 bg-black min-h-full h-full overflow-y-auto pb-32">{children}</main>
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/dashboard/Sidebar.tsx b/packages/nextjs/components/dashboard/Sidebar.tsx
@@ -3,25 +3,25 @@ import Link from "next/link";
 
 const Sidebar: React.FC = () => {
   return (
-    <div className="bg-[#1A1D1F] text-[#ffffff90] w-1/6 px-6 ">
+    <div className="bg-[#00011e] text-[#ffffff90] w-1/6 px-6 ">
       <Link className="logo py-6 cursor-pointer" href="/">
         <img src="/assets/logo.png" alt="Logo" className="pt-6" />
       </Link>
-      <ul className="ml-6 bg-[#1A1D1F] h-[100%] py-12">
+      <ul className="ml-6 bg-[#00011e] h-[100%] py-12">
         <li className="mb-8">
-          <a href="#">Dashboard</a>
+          <Link href="/dashboard/artists">Your Artists</Link>
         </li>
         <li className="mb-8">
-          <a href="#">Access</a>
+          <Link href="/search">Discover</Link>
         </li>
         <li className="mb-8">
-          <a href="#">Followers</a>
+          <Link href="#">Followers</Link>
         </li>
         <li className="mb-8">
-          <a href="#">Rewards</a>
+          <Link href="#">Rewards</Link>
         </li>
         <li className="mb-8">
-          <a href="#">Messages</a>
+          <Link href="#">Messages</Link>
         </li>
       </ul>
     </div>

diff --git a/packages/nextjs/components/spotify/ArtistList.tsx b/packages/nextjs/components/spotify/ArtistList.tsx
@@ -16,7 +16,7 @@ export default function ArtistList({ artists }: IProps) {
           heading={artist.name}
           images={artist.images}
           altTitle={artist.name}
-          subheading="Artist"
+          subheading={artist.genres && artist.genres.length > 0 ? artist.genres[0] : "artist"}
           imageRounded
           type="artist"
         />

diff --git a/packages/nextjs/components/spotify/CardItem.tsx b/packages/nextjs/components/spotify/CardItem.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { RiMusic2Fill } from "react-icons/ri";
 
@@ -23,20 +22,22 @@ export default function CardItem({
 }: IProps) {
   return (
     <Link href={`/${type}/${id}`} passHref>
-      <div className="transition duration-300 p-4 rounded cursor-pointer hover:bg-[#282828] bg-paper">
+      <div className="transition duration-300 p-3 rounded cursor-pointer hover:bg-[#282828] bg-paper border-2 border-[#ffffff50]">
         {images.length > 0 ? (
-          <Image
+          <img
             src={images[0].url}
             alt={altTitle}
-            className={`object-cover w-full h-36  ${imageRounded ? "rounded-full" : "rounded"}`}
+            width={50}
+            height={50}
+            className={`object-cover w-full h-36 rounded ${imageRounded ? "" : ""}`}
           />
         ) : (
           <div className="w-full h-40">
             <RiMusic2Fill className="w-full h-full bg-paper " />
           </div>
         )}
         <h3 className="mt-5 font-bold truncate">{heading}</h3>
-        {subheading && <h6 className="text-sm truncate text-gray">{subheading}</h6>}
+        {subheading && <h6 className="text-sm truncate text-gray capitalize">{subheading}</h6>}
       </div>
     </Link>
   );

diff --git a/packages/nextjs/components/spotify/CardItemGrid.tsx b/packages/nextjs/components/spotify/CardItemGrid.tsx
@@ -1,3 +1,3 @@
 export default function CardItemGrid({ children }: any) {
-  return <div className="grid grid-cols-6 gap-6">{children}</div>;
+  return <div className="grid grid-cols-4 gap-6">{children}</div>;
 }
diff --git a/packages/nextjs/components/spotify/Header.tsx b/packages/nextjs/components/spotify/Header.tsx
@@ -26,7 +26,7 @@ export default function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-50 flex items-center justify-between w-full p-4 pl-10 bg-[#111011]">
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full p-4 pl-10 bg-[#00011e]">
       <div className="flex items-center gap-10 w-[32rem]">
         <div className="flex items-center gap-3">
           <button

diff --git a/packages/nextjs/components/spotify/Layout.tsx b/packages/nextjs/components/spotify/Layout.tsx
@@ -14,7 +14,7 @@ export default function Layout({ children, title }: IProps) {
       <Head>
         <title>{title}</title>
       </Head>
-      <section className={`w-full ${router.pathname === "/login" ? "" : "p-4"}`}>{children}</section>
+      <section className={`w-full ${router.pathname === "/login" ? "" : ""}`}>{children}</section>
     </>
   );
 }
diff --git a/packages/nextjs/components/spotify/SearchInput.tsx b/packages/nextjs/components/spotify/SearchInput.tsx
@@ -18,10 +18,7 @@ export default function SearchInput() {
   }
 
   return (
-    <form
-      className="flex items-center justify-between w-full gap-3 px-3 py-1.5 bg-white rounded-full"
-      onSubmit={handleSubmit}
-    >
+    <form className="flex items-center justify-between w-full gap-3 px-3 py-2 bg-black " onSubmit={handleSubmit}>
       <IoSearchOutline className="text-2xl text-[#121212]" />
 
       <input

diff --git a/packages/nextjs/components/spotify/TracksTable.tsx b/packages/nextjs/components/spotify/TracksTable.tsx
@@ -55,7 +55,7 @@ export default function TracksTable({ tracks, noAlbum = false, noArtist = false
                 {(!noAlbum || noArtist) && (
                   <div className="flex-shrink-0 w-10 h-10">
                     <img
-                      src={track.album.images?.[0].url || " "}
+                      src={track.album?.images?.[0].url || " "}
                       alt={track.name}
                       className="object-contain w-10 h-10"
                     />
@@ -93,8 +93,8 @@ export default function TracksTable({ tracks, noAlbum = false, noArtist = false
 
             {!noAlbum && (
               <div className="flex items-center w-10/12 col-span-4 my-3 text-sm text-gray">
-                <Link href={`/album/${track.album.id}`}>
-                  <a className="truncate hover:text-white hover:underline">{track.album.name}</a>
+                <Link href={`/album/${track.album?.id || ""}`}>
+                  <a className="truncate hover:text-white hover:underline">{track.album?.name || ""}</a>
                 </Link>
               </div>
             )}

diff --git a/packages/nextjs/pages/api/search.ts b/packages/nextjs/pages/api/search.ts
@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getSession } from "next-auth/react";
+import { MySession } from "~~/types/session";
+import { customGet } from "~~/utils/beat-bridge/customGet";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const query = req.query?.q;
+  const session = (await getSession({ req })) as MySession | null;
+
+  const searchResults = await customGet(
+    `https://api.spotify.com/v1/search?q=${query}&market=from_token&type=album,track,artist,playlist&limit=50`,
+    session,
+  );
+  res.status(200).json(searchResults);
+}