feat: sidebar cards

src/components/ExpandContent.tsx

@@ -2,11 +2,17 @@ const ExpandContent = () => {
   return (
     <div
       data-testid="expand-content-element"
-      className="card bg-base-300 my-10 basis-1/4 shadow-xl"
+      className="rounded-2xl my-10 bg-base-300 min-h-fit basis-1/8 p-4"
     >
-      <div className="card-body">
-        <h2 className="card-title">Card title!</h2>
-        <p>If a dog chews shoes whose shoes does he choose?</p>
+      <div className="flex flex-col gap-4">
+        <h1>Top 50 Global</h1>
+        <img
+          className="rounded"
+          src="/assets/images/bruno.png"
+          alt="Album"
+          width={300}
+          height={300}
+        />
       </div>
     </div>
   );

src/components/Footer/Footer.tsx

@@ -3,13 +3,14 @@ import SideControls from "./SideControls.tsx";
 import MainControls from "./MainControls.tsx";
 
 const Footer = () => {
+  const img = "/assets/images/Goodluck.png";
   return (
     <footer
       data-testid="footer-element"
       className="footer footer-center bg-base-200 text-base-content p-4"
     >
       <div className="flex flex-row justify-between w-full">
-        <SideCard />
+        <SideCard img={img} artist="Chappel Roan" title="Good Luck, Babe!" />
         <MainControls />
         <SideControls />
       </div>

src/components/Footer/MainControls.tsx

@@ -25,7 +25,7 @@ const MainControls = () => {
         </button>
       </div>
       <div className="flex flex-row gap-2 items-center m-auto">
-        <p className="text-xs">0:00</p>
+        <p className="text-xs">1:50</p>
         <progress
           className="progress w-[400px]"
           value={50}

src/components/Footer/SideCard.tsx

@@ -1,16 +1,27 @@
-const SideCard = () => {
+const SideCard = ({
+  img,
+  title,
+  artist,
+  styles,
+  active,
+}: {
+  img: string;
+  title: string;
+  artist: string;
+  active?: boolean;
+  styles?: React.CSSProperties;
+}) => {
   return (
-    <div className="flex basis-1/4 flex-row items-center gap-2">
-      <img
-        className="rounded"
-        src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
-        alt="Album"
-        width={50}
-        height={50}
-      />
-      <div className="flex flex-col">
-        <p className="font-bold text-xs">Title</p>
-        <p className="text-xs">Artist</p>
+    <div
+      style={styles}
+      className={`flex basis-1/4 flex-row items-center gap-2 cursor-pointer rounded-md p-2 ${active ? "bg-gray-700" : ""}`}
+    >
+      <img className="rounded" src={img} alt="Album" width={50} height={50} />
+      <div className="flex flex-col text-left gap-2">
+        <p className={`font-bold text-sm ${active ? "text-green-600" : ""}`}>
+          {title}
+        </p>
+        <p className="text-xs">{artist}</p>
       </div>
     </div>
   );

src/components/Header/AccountBar.tsx

@@ -15,7 +15,7 @@ const AccountBar = () => {
   const { data, isPending } = useProfileQuery(accessToken ?? "");
 
   const { setCurrentContent } = useContentStore();
-  const srcImage = "/assets/images/man.png";
+  const srcImage = "/assets/images/post_malone.jpg";
   return (
     <div
       data-testid="accountbar-element"

src/components/MainContent.tsx

@@ -8,7 +8,7 @@ const MainContent = () => {
   return (
     <div
       data-testid="main-content-element"
-      className="card bg-base-300 my-10 basis-1/2 shadow-xl max-h-screen overflow-y-auto"
+      className="card bg-base-300 my-10 basis-3/4 shadow-xl max-h-screen overflow-y-auto"
     >
       {currentContent === MC.PROFILE && <Profile />}
       {currentContent === MC.SETTINGS && <Settings />}

src/components/Sidebar.tsx

@@ -1,11 +1,80 @@
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import AddIcon from "@mui/icons-material/Add";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import SideCard from "./Footer/SideCard.tsx";
+
 const Sidebar = () => {
+  const sidebarData = [
+    {
+      img: "/assets/images/region_global_default.jpg",
+      title: "Top 50 Global",
+      artist: "Playlist - Spotify",
+      active: true,
+    },
+    {
+      img: "/assets/images/region_ph_default.jpg",
+      title: "Top 50 Philippines",
+      artist: "Playlist - Spotify",
+      active: false,
+    },
+    {
+      img: "/assets/images/region_br_default.jpg",
+      title: "Top 50 Brazil",
+      artist: "Playlist - Spotify",
+      active: false,
+    },
+    {
+      img: "/assets/images/region_dk_default.jpg",
+      title: "Top 50 Denmark",
+      artist: "Playlist - Spotify",
+      active: false,
+    },
+    {
+      img: "/assets/images/region_fr_default.jpg",
+      title: "Top 50 France",
+      artist: "Playlist - Spotify",
+      active: false,
+    },
+  ];
   return (
     <div
       data-testid="sidebar-element"
-      className="rounded-2xl my-10 bg-base-300 min-h-fit basis-1/4"
+      className="rounded-2xl my-10 bg-base-300 min-h-fit basis-1/8 p-4"
     >
-      <div className="flex flex-row">
-        <p className="font-bold">Your Library</p>
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex flex-row gap-2 w-full justify-between items-center">
+          <div className="flex flex-row gap-2 items-center">
+            <button className="btn btn-circle btn-ghost bg-base-100">
+              <ViewColumnIcon />
+            </button>
+            <p className="font-bold">Your Library</p>
+          </div>
+          <div className="flex flex-row gap-2 items-center">
+            <button className="btn btn-circle btn-ghost bg-base-100">
+              <AddIcon />
+            </button>
+            <button className="btn btn-circle btn-ghost bg-base-100">
+              <ArrowForwardIcon />
+            </button>
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 w-full overflow-x-auto">
+          <button className="badge badge-neutral p-4">Playlists</button>
+          <button className="badge badge-neutral p-4">Artists</button>
+          <button className="badge badge-neutral p-4">Podcasts</button>
+          <button className="badge badge-neutral p-4">Albums</button>
+        </div>
+        <div className="flex flex-col w-full">
+          {sidebarData.map((data, index) => (
+            <SideCard
+              key={index}
+              img={data.img}
+              title={data.title}
+              artist={data.artist}
+              active={data.active}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

src/pages/Dashboard.tsx

@@ -8,7 +8,7 @@ const Dashboard = () => {
   return (
     <div className="outfit-font max-auto" data-testid="dashboard-element">
       <Header />
-      <div className="flex flex-row gap-2 px-2 h-[80vh] overflow-y-auto">
+      <div className="flex flex-row gap-2 px-2 h-[79vh] overflow-y-auto">
         <Sidebar />
         <MainContent />
         <ExpandContent />

src/pages/Profile.tsx

@@ -1,7 +1,7 @@
 import ReactCountryFlag from "react-country-flag";
 
 const Profile = () => {
-  const srcImage = "/assets/images/man.png";
+  const srcImage = "/assets/images/post_malone.jpg";
   return (
     <div data-testid="profile-card-element" className="card-body">
       <div className="flex flex-row gap-4 items-center">
@@ -13,9 +13,11 @@ const Profile = () => {
         />
         <div className="flex flex-col justify-around align-middle gap-4">
           <p className="text-sm">Profile</p>
-          <h1 className="font-bold text-6xl">John Doe</h1>
-          <p className="text-sm">1K Followers</p>
-          <ReactCountryFlag countryCode="PH" />
+          <h1 className="font-bold text-6xl">Post Malone</h1>
+          <p className="text-sm">
+            50 Public Playlist - 1 Following - 5M Followers
+          </p>
+          <ReactCountryFlag countryCode="US" />
         </div>
       </div>
     </div>