Merge pull request #10 from frank-mendez/feature/layout

feat: layout

package.json

@@ -14,10 +14,19 @@
     "commitlint": "commitlint --edit"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "axios": "^1.7.3",
     "query-string": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.0"
   },
   "devDependencies": {

src/components/ExpandContent.tsx

@@ -0,0 +1,12 @@
+const ExpandContent = () => {
+  return (
+    <div className="card bg-base-300 my-10 basis-1/4 shadow-xl">
+      <div className="card-body">
+        <h2 className="card-title">Card title!</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+      </div>
+    </div>
+  );
+};
+
+export default ExpandContent;

src/components/Footer/Footer.tsx

@@ -0,0 +1,17 @@
+import SideCard from "./SideCard.tsx";
+import SideControls from "./SideControls.tsx";
+import MainControls from "./MainControls.tsx";
+
+const Footer = () => {
+  return (
+    <footer className="footer footer-center bg-base-200 text-base-content p-4">
+      <div className="flex flex-row justify-between w-full">
+        <SideCard />
+        <MainControls />
+        <SideControls />
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Footer/MainControls.tsx

@@ -0,0 +1,40 @@
+import { FaShuffle } from "react-icons/fa6";
+import SkipPreviousOutlinedIcon from "@mui/icons-material/SkipPreviousOutlined";
+import PlayCircleFilledOutlinedIcon from "@mui/icons-material/PlayCircleFilledOutlined";
+import SkipNextOutlinedIcon from "@mui/icons-material/SkipNextOutlined";
+import RepeatOutlinedIcon from "@mui/icons-material/RepeatOutlined";
+
+const MainControls = () => {
+  return (
+    <div className="flex basis-1/2 flex-col gap-2">
+      <div className="flex flex-row gap-2 m-auto mb-5">
+        <button className="btn btn-circle btn-ghost bg-base-100">
+          <FaShuffle />
+        </button>
+        <button className="btn btn-circle btn-ghost bg-base-100">
+          <SkipPreviousOutlinedIcon />
+        </button>
+        <button className="btn btn-circle btn-ghost bg-base-100">
+          <PlayCircleFilledOutlinedIcon />
+        </button>
+        <button className="btn btn-circle btn-ghost bg-base-100">
+          <SkipNextOutlinedIcon />
+        </button>
+        <button className="btn btn-circle btn-ghost bg-base-100">
+          <RepeatOutlinedIcon />
+        </button>
+      </div>
+      <div className="flex flex-row gap-2 items-center m-auto">
+        <p className="text-xs">0:00</p>
+        <progress
+          className="progress w-[400px]"
+          value={50}
+          max="100"
+        ></progress>
+        <p className="text-xs">3:00</p>
+      </div>
+    </div>
+  );
+};
+
+export default MainControls;

src/components/Footer/SideCard.tsx

@@ -0,0 +1,19 @@
+const SideCard = () => {
+  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>
+    </div>
+  );
+};
+
+export default SideCard;

src/components/Footer/SideControls.tsx

@@ -0,0 +1,34 @@
+import SmartDisplayOutlinedIcon from "@mui/icons-material/SmartDisplayOutlined";
+import LyricsOutlinedIcon from "@mui/icons-material/LyricsOutlined";
+import HorizontalSplitOutlinedIcon from "@mui/icons-material/HorizontalSplitOutlined";
+import PhonelinkOutlinedIcon from "@mui/icons-material/PhonelinkOutlined";
+import VolumeDownOutlinedIcon from "@mui/icons-material/VolumeDownOutlined";
+import AspectRatioOutlinedIcon from "@mui/icons-material/AspectRatioOutlined";
+
+const SideControls = () => {
+  return (
+    <div className="basis-1/4 flex flex-row gap-1 items-center justify-end">
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <SmartDisplayOutlinedIcon />
+      </button>
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <LyricsOutlinedIcon />
+      </button>
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <HorizontalSplitOutlinedIcon />
+      </button>
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <PhonelinkOutlinedIcon />
+      </button>
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <VolumeDownOutlinedIcon />
+      </button>
+      <progress className="progress w-[100px]" value={50} max="100"></progress>
+      <button className="btn btn-sm btn-circle btn-ghost bg-base-100">
+        <AspectRatioOutlinedIcon />
+      </button>
+    </div>
+  );
+};
+
+export default SideControls;

src/components/Header/AccountBar.tsx

@@ -0,0 +1,29 @@
+import NotificationsNoneOutlinedIcon from "@mui/icons-material/NotificationsNoneOutlined";
+import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
+
+const AccountBar = () => {
+  return (
+    <div className="flex-none flex flex-row gap-2 items-center justify-center">
+      <button className="btn btn-circle btn-ghost m-auto bg-base-100">
+        <NotificationsNoneOutlinedIcon />
+      </button>
+      <button className="btn btn-circle btn-ghost m-auto bg-base-100">
+        <PeopleOutlineOutlinedIcon />
+      </button>
+      <div
+        tabIndex={0}
+        role="button"
+        className="btn btn-ghost btn-circle avatar"
+      >
+        <div className="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS Navbar component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountBar;

src/components/Header/Header.tsx

@@ -0,0 +1,30 @@
+import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
+import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import SearchBar from "./Searchbar.tsx";
+import AccountBar from "./AccountBar.tsx";
+const Header = () => {
+  return (
+    <div className="navbar bg-base-300">
+      <div className="flex flex-row justify-between w-full">
+        <div className="flex-none flex flex-row gap-2">
+          <button className="btn btn-circle btn-ghost bg-base-100">
+            <ArrowBackIosNewOutlinedIcon />
+          </button>
+          <button className="btn btn-circle btn-ghost bg-base-100">
+            <ArrowForwardIosOutlinedIcon />
+          </button>
+        </div>
+        <div className="justify-center flex flex-row items-center gap-2">
+          <button className="btn btn-circle btn-ghost m-auto bg-base-100">
+            <HomeOutlinedIcon />
+          </button>
+          <SearchBar />
+        </div>
+        <AccountBar />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Header/Searchbar.tsx

@@ -0,0 +1,23 @@
+// src/components/SearchBar.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import BrowseGalleryOutlinedIcon from "@mui/icons-material/BrowseGalleryOutlined";
+
+const SearchBar = () => {
+  return (
+    <div className="relative w-full max-w-md">
+      <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+        <SearchIcon className="text-gray-500" />
+      </div>
+      <input
+        type="text"
+        className="w-full pl-10 pr-10 py-2 rounded-full bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        placeholder="Search for songs, artists, albums..."
+      />
+      <button className="absolute inset-y-0 right-0 flex items-center pr-3">
+        <BrowseGalleryOutlinedIcon className="text-gray-500" />
+      </button>
+    </div>
+  );
+};
+
+export default SearchBar;

src/components/MainContent.tsx

@@ -0,0 +1,12 @@
+const MainContent = () => {
+  return (
+    <div className="card bg-base-300 my-10 basis-1/2 shadow-xl">
+      <div className="card-body">
+        <h2 className="card-title">Card title!</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+      </div>
+    </div>
+  );
+};
+
+export default MainContent;

src/components/Sidebar.tsx

@@ -0,0 +1,11 @@
+const Sidebar = () => {
+  return (
+    <div className="rounded-2xl my-10 bg-base-300 min-h-fit basis-1/4">
+      <div className="flex flex-row">
+        <p className="font-bold">Your Library</p>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/pages/Dashboard.tsx

@@ -1,12 +1,27 @@
-import { useAuth } from "../context/AuthContext.tsx";
+import Header from "../components/Header/Header.tsx";
+import Footer from "../components/Footer/Footer.tsx";
+import Sidebar from "../components/Sidebar.tsx";
+import MainContent from "../components/MainContent.tsx";
+import ExpandContent from "../components/ExpandContent.tsx";
 import { Navigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext.tsx";
 
 const Dashboard = () => {
   const { accessToken } = useAuth();
   if (!accessToken) {
     return <Navigate to="/login" />;
   }
-  return <h1>Dashboard</h1>;
+  return (
+    <div data-testid="dashboard-element">
+      <Header />
+      <div className="flex flex-row gap-2 px-2">
+        <Sidebar />
+        <MainContent />
+        <ExpandContent />
+      </div>
+      <Footer />
+    </div>
+  );
 };
 
 export default Dashboard;

src/pages/Login.tsx

@@ -7,16 +7,23 @@ const Login = () => {
     return <Navigate to="/" />;
   }
   return (
-    <div className="hero bg-base-200 min-h-screen">
+    <div
+      data-testid="login-page-component"
+      className="hero bg-base-200 min-h-screen"
+    >
       <div className="hero-content text-center">
         <div className="max-w-md">
           <h1 className="text-5xl font-bold">Hello there</h1>
           <p className="py-6">
-            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
-            excepturi exercitationem quasi. In deleniti eaque aut repudiandae et
-            a id nisi.
+            Welcome to the Spotify Clone. Please login to continue. We will be
+            using Spotify's PCKE method for authentication. This means we will
+            not be storing your password or any sensitive information.
           </p>
-          <button onClick={login} className="btn btn-primary">
+          <button
+            data-testid="login-button"
+            onClick={login}
+            className="btn btn-primary"
+          >
             Login
           </button>
         </div>