Merge pull request #81 from G-Techs/chore/improve-setup

refactor: clean up and add new settings

.commitlintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@commitlint/config-conventional"
+}

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+public
+.next/
+build/

.github/workflows/release.yml

@@ -0,0 +1,23 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v3
+      - name: Install the dependencies
+        run: npm ci
+      - name: Setup the author
+        run: git config --global user.name "${{ github.actor }}" && git config --global user.email "${{ github.actor }}@users.noreply.github.com"
+      - name: Run release
+        run: npm run release --ci
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: End message
+        run: echo "Release done!!!!! 🚀"

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+public
+.next/
+build/

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 180
+}

.release-it.json

@@ -0,0 +1,13 @@
+{
+  "git": {
+    "requireBranch": "main",
+    "commitMessage": "chore: release v${version}"
+  },
+  "hooks": {
+    "before:init": ["git pull", "npm run lint", "npm run prettier:check"],
+    "after:bump": "npx auto-changelog -p"
+  },
+  "github": {
+    "release": true
+  }
+}

components/AccountSettingPage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AccountSettings from "../modules/AccountSettings";
-import PageCard from "../modules/__modules__/Card/PageCard";
+import PageCard from "../modules/layout/PageLayout";
 
 const AccountSettingsPage = () => {
   const [isTopNav, setIsTopNav] = useState(false);

components/AddCategoryPage/index.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { useState } from "react";
-import AddCategory from "../modules/AddCategory";
-import PageCard from "../modules/__modules__/Card/PageCard";
-
-const AddCategoryPage = () => {
-  const [isTopNav, setIsTopNav] = useState(false);
-  
-  return (
-    <PageCard setIsTopNav={setIsTopNav}>
-      <AddCategory  />
-    </PageCard>
-  );
-};
-export default AddCategoryPage;
+import React from "react";
+import { useState } from "react";
+import AddCategory from "../modules/AddCategory";
+import PageCard from "../modules/layout/PageLayout";
+
+const AddCategoryPage = () => {
+  const [_, setIsTopNav] = useState(false);
+
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AddCategory />
+    </PageCard>
+  );
+};
+export default AddCategoryPage;

components/AddNewSongPage/index.tsx

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

components/AdminDashboardPage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import AdminDashboard from "../modules/AdminDashboard";
-import PageCard from "../modules/__modules__/Card/PageCard";
+import PageCard from "../modules/layout/PageLayout";
 
 const AdminDashboardPage = () => {
   const [isTopNav, setIsTopNav] = useState(false);

components/AlbumPage/index.tsx

@@ -3,9 +3,9 @@ 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 SongCard from "../modules/Card/SongCard";
 import HotSongs from "../modules/HotSongs";
-import PageCard from "../modules/__modules__/Card/PageCard";
+import PageCard from "../modules/layout/PageLayout";
 
 const albumBg = {
   backgroundImage: `url(${liveBg.src})`,
@@ -19,32 +19,17 @@ const AlbumPage = () => {
   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 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}
-              />
+              <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"
-              />
+              <img src={equalizer.src} className="w-[20rem] h-[20rem] object-cover" alt="equalizer" />
             </div>
             <BottomPlayer isFixed={false} />
           </div>

components/Auth/ConfirmEmail/index.tsx

@@ -7,31 +7,21 @@ const ConfirmEmail = () => {
         <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"
-              />
+              <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"
-              />
+              <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.
+              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>
+          <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>

components/Auth/LoginPage/index.tsx

@@ -36,16 +36,11 @@ const LoginPage = () => {
         </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")}
-          >
+          <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>
+        <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>
   );

components/Auth/ResetPassword/index.tsx

@@ -7,35 +7,18 @@ const ResetPassword = () => {
         <div className="lg:max-w-[40%] px-6 w-full bg-opacity-10 border border-gray-700 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
           <div className="w-full -mt-12 flex justify-center">
             <div className="w-[8rem] ring-2 ring-primary rounded-full overflow-hidden">
-              <img
-                alt="Pic"
-                src={
-                  "https://templates.iqonic.design/muzik/html/images/login/user.png"
-                }
-              />
+              <img alt="Pic" src={"https://templates.iqonic.design/muzik/html/images/login/user.png"} />
             </div>
           </div>
           <div className="mt-6">
-            <p className=" text-gray-200 lg:text-7xl text-3xl">
-              Reset password
-            </p>
-            <p className="mt-6 md:text-xl text-md text-gray-100">
-              Enter your email address and we&apos;ll send you an email with
-              instructions to reset your password
-            </p>
+            <p className=" text-gray-200 lg:text-7xl text-3xl">Reset password</p>
+            <p className="mt-6 md:text-xl text-md text-gray-100">Enter your email address and we&apos;ll send you an email with instructions to reset your password</p>
             <form className="flex flex-col mt-3">
               <label className="text-gray-300 font-bold my-2">Password</label>
-              <input
-                type="email"
-                required
-                placeholder="Enter email"
-                className="p-3 bg-transparent border-2 rounded-lg "
-              />
+              <input type="email" required placeholder="Enter email" className="p-3 bg-transparent border-2 rounded-lg " />
             </form>
           </div>
-          <button className="mt-6 text-lg  text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
-            Reset password
-          </button>
+          <button className="mt-6 text-lg  text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">Reset password</button>
         </div>
       </div>
     </div>

components/Auth/SignupPage/index.tsx

@@ -56,9 +56,7 @@ const SignupPage = () => {
             Log In
           </p>
         </div>
-        <button className="bg-primary w-full py-3 mt-3 rounded-lg text-white hover:bg-opacity-80 transition-all">
-          Sign up
-        </button>
+        <button className="bg-primary w-full py-3 mt-3 rounded-lg text-white hover:bg-opacity-80 transition-all">Sign up</button>
       </div>
     </div>
   );