Skip to content

Commit

Permalink
Merge pull request #9 from Ifechukwudaniel/dashboard-ui
Browse files Browse the repository at this point in the history 
Dashboard UI
  • Loading branch information
@Ifechukwudaniel
Ifechukwudaniel authored Dec 21, 2023
2 parents 9286b4f + f5fe146 commit 2700d1a
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 77 deletions.
9 changes: 4 additions & 5 deletions packages/nextjs/components/ClaimNft.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const ClaimNFT: React.FC = () => {

return (
<div className="flex justify-center">
<div className="w-full max-w-screen-lg rounded-lg bg-black">
<div className="w-full max-w-screen-lg rounded-lg bg-[#00000090]">
{tasks.map((task, index) => (
<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>
Expand All @@ -59,7 +59,7 @@ const ClaimNFT: React.FC = () => {
</div>
))}
</div>

f
{selectedTask && (
<div
className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 ${
Expand All @@ -68,12 +68,11 @@ 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>
<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" onClick={closeModal}>
Mint
</button>
<button className="bg-[#9DFF94] text-black px-8 py-2">Mint</button>
</div>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/spotify/CardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function CardItem({
}: IProps) {
return (
<Link href={`/${type}/${id}`} passHref>
<div className="transition duration-300 p-3 rounded cursor-pointer hover:bg-[#282828] bg-paper border-2 border-[#ffffff50]">
<div className="transition duration-300 p-3 rounded cursor-pointer hover:bg-[#282828] bg-[#00000090] border-2 border-[#ffffff30]">
{images.length > 0 ? (
<img
src={images[0].url}
Expand Down
37 changes: 17 additions & 20 deletions packages/nextjs/pages/artist/[artistId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,24 +88,21 @@ export default function SingleArtist({
</div>
</div>

<div>
<button
className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
userFollowsArtist ? "hidden" : ""
}`}
>
Follow
</button>
</div>
<div>
<button
className={`bg-lightgreen text-black px-8 py-2 rounded bg-[#9DFF94] text-sm font-bold ${
userFollowsArtist ? "" : "hidden"
}`}
>
Unfollow
</button>
</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">
Expand Down Expand Up @@ -199,8 +196,8 @@ export default function SingleArtist({
)}

{relatedArtists?.artists.length > 0 && (
<div className="mt-12">
<Heading text="Fans also like" />
<div className="mt-12 bg-[#00011e] rounded-lg p-12">
<Heading text="Similar Artists" />
<ArtistList artists={relatedArtists.artists} />
</div>
)}
Expand Down
62 changes: 62 additions & 0 deletions packages/nextjs/pages/dashboard/overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { GetServerSideProps } from "next";
import { getSession } from "next-auth/react";
import DashboardLayout from "~~/components/dashboard/DashboardLayout";
import ArtistList from "~~/components/spotify/ArtistList";
import Heading from "~~/components/spotify/Heading";
import Layout from "~~/components/spotify/Layout";
import { MySession } from "~~/types/session";
import { Artist } from "~~/types/spotify";
import { customGet } from "~~/utils/beat-bridge/customGet";
import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";

interface IProps {
topArtists: Artist[];
}

export default function FollowedArtists({ topArtists }: IProps) {
return (
<Layout title="Beat Bridge - Your Library">
<DashboardLayout>
<Heading text="Your Artists" />
<select
name="time-range"
onChange={e => e.target.value}
className="mx-2 pr-1 bg-transparent border-none rounded cursor-pointer text-base p-2 "
>
<option className="text-black" value="short_term">
the last 4 weeks
</option>
<option className="text-black" value="medium_term">
the last 6 months
</option>
<option className="text-black" value="long_term">
all time
</option>
</select>
<ArtistList artists={topArtists} />
</DashboardLayout>
</Layout>
);
}

export const getServerSideProps: GetServerSideProps = async ctx => {
const session = (await getSession(ctx)) as MySession | null;

if (!(await isAuthenticated(session))) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}

const timeRange = ctx.query.time_range || "short_term";

const topArtists = await customGet(
`https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=50`,
session,
);

return { props: { topArtists: topArtists.items } };
};
2 changes: 1 addition & 1 deletion packages/nextjs/pages/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Login() {
style={{ backgroundImage: `url("/assets/bg.png")`, backgroundColor: "#00011e" }}
>
<button className="bg-[#9DFF94] py-4 px-8 font-bold rounded-full text-black" onClick={handleLogin}>
Login to Spotify
Login with Spotify
</button>
</div>
);
Expand Down
88 changes: 48 additions & 40 deletions packages/nextjs/pages/playlists/[playlistId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,50 +18,58 @@ export default function Playlist({ playlist }: IProps) {
return (
<DashboardLayout>
<Layout title={`Beat Bridge - ${playlist?.name}`}>
<div className="flex items-end gap-6">
{playlist && (
<>
{playlist.images && playlist.images?.length > 0 ? (
<img src={playlist.images[0].url || ""} alt={playlist.name} className="object-contain w-60 h-60 " />
) : (
<div className="w-full h-40">
<RiMusic2Fill className="w-full h-full bg-paper " />
</div>
)}
<div className="flex flex-col gap-3">
<h5 className="text-xs font-bold uppercase">{playlist.type}</h5>
<h2 className="text-5xl font-bold">{playlist.name}</h2>
<div className="bg-[#00011e] rounded-lg p-6 md:p-12">
<div className="flex items-end gap-6">
{playlist && (
<>
{playlist.images && playlist.images?.length > 0 ? (
<img
src={playlist.images[0].url || ""}
alt={playlist.name}
className="object-contain w-60 h-60 rounded-lg "
/>
) : (
<div className="w-full h-40">
<RiMusic2Fill className="w-full h-full bg-paper " />
</div>
)}
<div className="flex flex-col gap-3">
<h5 className="text-xs font-bold uppercase">{playlist.type}</h5>
<h2 className="text-5xl font-bold">{playlist.name}</h2>

<p className="w-full text-xs leading-5">{parse(playlist.description || "")}</p>
<p className="w-full text-xs leading-5">{parse(playlist.description || "Playlist")}</p>

<div className="flex items-center gap-5 text-sm">
<span className="font-bold">{playlist.owner?.display_name}</span>
{playlist?.followers?.total ? (
playlist?.followers?.total > 0 && (
<span className="text-gray">
{playlist.followers?.total.toLocaleString()} {playlist.followers?.total > 1 ? "likes" : "like"}
</span>
)
) : (
<span className="text-gray">0 likes</span>
)}
{playlist?.tracks?.items && playlist?.tracks?.items?.length > 0 && (
<span className="text-gray">{playlist.tracks.total.toLocaleString()} songs</span>
)}{" "}
<div className="flex items-center gap-5 text-sm">
<span className="font-bold">{playlist.owner?.display_name}</span>
{playlist?.followers?.total ? (
playlist?.followers?.total > 0 && (
<span className="text-gray">
{playlist.followers?.total.toLocaleString()}{" "}
{playlist.followers?.total > 1 ? "likes" : "like"}
</span>
)
) : (
<span className="text-gray">0 likes</span>
)}
{playlist?.tracks?.items && playlist?.tracks?.items?.length > 0 && (
<span className="text-gray">{playlist.tracks.total.toLocaleString()} songs</span>
)}
</div>
<button className="bg-[#9DFF94] text-black px-8 py-2 rounded-full">Mint</button>
</div>
</div>
</>
)}
</div>
</>
)}
</div>

<div className="mt-5">
<TracksTable
tracks={
playlist?.tracks?.items
? playlist.tracks.items.filter(item => item.track !== null).map(item => item.track)
: []
}
/>
<div className="mt-5">
<TracksTable
tracks={
playlist?.tracks?.items
? playlist.tracks.items.filter(item => item.track !== null).map(item => item.track)
: []
}
/>
</div>
</div>
</Layout>
</DashboardLayout>
Expand Down
43 changes: 33 additions & 10 deletions packages/nextjs/pages/wrapped/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
import { GetServerSideProps } from "next";
import { getSession } from "next-auth/react";
import DashboardLayout from "~~/components/dashboard/DashboardLayout";
import ArtistList from "~~/components/spotify/ArtistList";
import Heading from "~~/components/spotify/Heading";
import Layout from "~~/components/spotify/Layout";
import { MySession } from "~~/types/session";
import { PlaylistType } from "~~/types/spotify";
import { Artist } from "~~/types/spotify";
import { customGet } from "~~/utils/beat-bridge/customGet";
import { isAuthenticated } from "~~/utils/beat-bridge/isAuthenticated";

interface IProps {
userPlaylist: PlaylistType[];
topArtists: Artist[];
}

export default function FollowedArtists({ userPlaylist }: IProps) {
console.log(userPlaylist);
export default function ToArtists({ topArtists }: IProps) {
return (
<DashboardLayout>
<Layout title="Beat Bridge - Your Wrapped">
<Heading text="Your Wrapped" />
</Layout>
</DashboardLayout>
<Layout title="Beat Bridge - Your Wrapped">
<DashboardLayout>
<Heading text="Your Artists" />
<select
name="time-range"
onChange={e => e.target.value}
className="mx-2 pr-1 bg-transparent border-none rounded cursor-pointer text-base p-2 "
>
<option className="text-black" value="short_term">
the last 4 weeks
</option>
<option className="text-black" value="medium_term">
the last 6 months
</option>
<option className="text-black" value="long_term">
all time
</option>
</select>
<ArtistList artists={topArtists} />
</DashboardLayout>
</Layout>
);
}

Expand All @@ -33,6 +50,12 @@ export const getServerSideProps: GetServerSideProps = async ctx => {
},
};
}
const timeRange = ctx.query.time_range || "long_term";

return { props: { userPlaylist: [] } };
const topArtists = await customGet(
`https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=50`,
session,
);

return { props: { topArtists: topArtists.items } };
};

0 comments on commit 2700d1a

Please sign in to comment.