From e0a066ac8a13f9b8aef8921fade856ef22107917 Mon Sep 17 00:00:00 2001
From: Scott Moss <willscottmoss@gmail.com>
Date: Tue, 14 Dec 2021 15:22:31 -0600
Subject: [PATCH] gradient playlist page

---
 pages/playlist/[id].tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/pages/playlist/[id].tsx b/pages/playlist/[id].tsx
index dc86077..2f8c7cb 100644
--- a/pages/playlist/[id].tsx
+++ b/pages/playlist/[id].tsx
@@ -1,8 +1,37 @@
+import GradientLayout from '../../components/gradientLayout'
 import { validateToken } from '../../lib/auth'
 import prisma from '../../lib/prisma'
 
+const getBGColor = (id) => {
+  const colors = [
+    'red',
+    'green',
+    'blue',
+    'orange',
+    'purple',
+    'gray',
+    'teal',
+    'yellow',
+  ]
+
+  return colors[id - 1] || colors[Math.floor(Math.random() * colors.length)]
+}
+
 const Playlist = ({ playlist }) => {
-  return <div>{playlist.name}</div>
+  const color = getBGColor(playlist.id)
+
+  return (
+    <GradientLayout
+      color={color}
+      roundImage={false}
+      title={playlist.name}
+      subtitle="playlist"
+      description={`${playlist.songs.length} songs`}
+      image={`https://picsum.photos/400?random=${playlist.id}`}
+    >
+      <div>dfd</div>
+    </GradientLayout>
+  )
 }
 
 export const getServerSideProps = async ({ query, req }) => {