Merge pull request #74 from G-Techs/ft/migrate-latest

Feat: migrate latest

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next"]
+  "extends": ["next"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

components/AdminDashboardPage/index.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import AdminDashboard from "../modules/AdminDashboard";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AdminDashboardPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AdminDashboard isTopNav={isTopNav} />
+    </PageCard>
+  );
+};
+
+export default AdminDashboardPage;

components/AlbumPage/index.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import liveBg from "../../components/modules/static/images/livebg.jpg";
+import equalizer from "../../components/modules/static/images/equalizer.gif";
+import { topSongsData } from "../dummy_data/topSongsData";
+import BottomPlayer from "../BottomPaler/BottomPalyer";
+import SongCard from "../modules/__modules__/Card/SongCard";
+import HotSongs from "../modules/HotSongs";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const albumBg = {
+  backgroundImage: `url(${liveBg.src})`,
+  backgroundPosition: "center",
+  backgroundSize: "cover",
+  backgroundRepeat: "no-repeat",
+};
+
+const AlbumPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <div className="bg-globalBg">
+      <PageCard setIsTopNav={setIsTopNav}>
+        <div
+          className={`flex mt-24 h-[30rem] mobile:h-fit relative mobile:flex-col transition-all ${
+            isTopNav && "mt-40"
+          }`}
+        >
+          <div
+            className="relative w-full rounded-tr-3xl rounded-bl-3xl flex flex-col"
+            style={albumBg}
+          >
+            <div className="flex items-center center text-white">
+              <img
+                src={topSongsData[2].img}
+                className="w-12 h-12 object-cover m-10 rounded-xl"
+                alt={topSongsData[2].artist}
+              />
+              <div>
+                <p className="font-bold">{topSongsData[2].artist}</p>
+                <p className="text-xs">{topSongsData[2].title}</p>
+              </div>
+            </div>
+            <div className="flex justify-center items-center">
+              <img
+                src={equalizer.src}
+                className="w-[20rem] h-[20rem] object-cover"
+                alt="equalizer"
+              />
+            </div>
+            <BottomPlayer isFixed={false} />
+          </div>
+          <div className="w-full flex flex-col md:flex-wrap ml-5 mobile:h-fit">
+            {topSongsData.map((song, index) => {
+              return <SongCard key={index} song={song} />;
+            })}
+          </div>
+        </div>
+        <HotSongs />
+      </PageCard>
+    </div>
+  );
+};
+
+export default AlbumPage;

components/Auth/ConfirmEmail/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const ConfirmEmail = () => {
+  return (
+    <div className="auth h-screen">
+      <div className="flex justify-center items-center w-full h-full">
+        <div className="lg:min-w-[50%] lg:max-w-[900px] px-5 w-full bg-opacity-10 border mx-2 border-gray-800 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
+          <div className="w-full -mt-12 flex justify-center">
+            <div className="lg:w-[8rem] w-[6rem] ring-2 ring-primary rounded-full overflow-hidden">
+              <img
+                alt="Pic"
+                src="https://templates.iqonic.design/muzik/html/images/login/user.png"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="lg:w-full">
+              <img
+                src="https://templates.iqonic.design/muzik/html/images/login/mail.png"
+                alt="email"
+              />
+            </div>
+          </div>
+          <div className="mt-6 text-gray-200">
+            <p className="md:text-7xl text-3xl">Success !</p>
+            <p className="md:text-xl text-md">
+              A email has been send to [email protected]. Please check for an
+              email from company and click on the included link to reset your
+              password.
+            </p>
+          </div>
+          <button className="mt-6 text-lg text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
+            back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmEmail;

components/Auth/LoginPage/index.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const LoginPage = () => {
+  const router = useRouter();
+  return (
+    <div className="flex items-center h-full">
+      <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
+        <div>
+          <h1 className="text-3xl text-center">Yokaa</h1>
+          <h1 className="text-4xl font-bold text-center pt-3">Log In</h1>
+        </div>
+        <div>
+          <form className="flex flex-col">
+            <div className="flex flex-col py-2">
+              <label htmlFor="email" className="py-2">
+                Email address
+              </label>
+              <input
+                type="email"
+                name="email"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="password" className="py-2">
+                Password
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+          </form>
+        </div>
+        <div className="flex justify-start w-[-webkit-fill-available] py-2">
+          You don&apos;t have an account ?
+          <span
+            className="text-primary text-left px-2 cursor-pointer"
+            onClick={() => router.push("/signup")}
+          >
+            Sign up
+          </span>
+        </div>
+        <button className="bg-primary hover:bg-opacity-80 transition-all w-full py-3 mt-3 rounded-lg text-white">
+          Log in
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;