From 036b35b38f63526e8250fe0d76ef9c1f750a6501 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 09:30:33 +0200 Subject: [PATCH 1/9] feat: migrate admin dashbord and its all depencies migrated --- components/AdminDashboardPage/index.jsx | 14 ----- components/AdminDashboardPage/index.tsx | 14 +++++ .../_modules/BestArtist/index.jsx | 40 ------------ .../_modules/BestArtist/index.tsx | 40 ++++++++++++ .../_modules/Cards/ArtistCard.jsx | 43 ------------- .../_modules/Cards/ArtistCard.tsx | 43 +++++++++++++ .../_modules/Cards/MusicStatisticCard.jsx | 45 -------------- .../_modules/Cards/MusicStatisticCard.tsx | 44 +++++++++++++ .../_modules/RevenueStatChart/index.jsx | 47 -------------- .../_modules/RevenueStatChart/index.tsx | 46 ++++++++++++++ components/modules/AdminDashboard/index.jsx | 62 ------------------- components/modules/AdminDashboard/index.tsx | 61 ++++++++++++++++++ components/modules/utils/dummy/dummyStat.js | 17 ----- components/modules/utils/dummy/dummyStat.ts | 17 +++++ components/modules/utils/dummy/index.js | 42 ------------- components/modules/utils/dummy/index.ts | 42 +++++++++++++ .../modules/utils/helpers/numberConverter.js | 16 ----- .../modules/utils/helpers/numberConverter.ts | 16 +++++ package-lock.json | 16 +++++ package.json | 1 + 20 files changed, 340 insertions(+), 326 deletions(-) delete mode 100644 components/AdminDashboardPage/index.jsx create mode 100644 components/AdminDashboardPage/index.tsx delete mode 100644 components/modules/AdminDashboard/_modules/BestArtist/index.jsx create mode 100644 components/modules/AdminDashboard/_modules/BestArtist/index.tsx delete mode 100644 components/modules/AdminDashboard/_modules/Cards/ArtistCard.jsx create mode 100644 components/modules/AdminDashboard/_modules/Cards/ArtistCard.tsx delete mode 100644 components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx create mode 100644 components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.tsx delete mode 100644 components/modules/AdminDashboard/_modules/RevenueStatChart/index.jsx create mode 100644 components/modules/AdminDashboard/_modules/RevenueStatChart/index.tsx delete mode 100644 components/modules/AdminDashboard/index.jsx create mode 100644 components/modules/AdminDashboard/index.tsx delete mode 100644 components/modules/utils/dummy/dummyStat.js create mode 100644 components/modules/utils/dummy/dummyStat.ts delete mode 100644 components/modules/utils/dummy/index.js create mode 100644 components/modules/utils/dummy/index.ts delete mode 100644 components/modules/utils/helpers/numberConverter.js create mode 100644 components/modules/utils/helpers/numberConverter.ts diff --git a/components/AdminDashboardPage/index.jsx b/components/AdminDashboardPage/index.jsx deleted file mode 100644 index 7e77fce..0000000 --- a/components/AdminDashboardPage/index.jsx +++ /dev/null @@ -1,14 +0,0 @@ -// 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 ( -// -// -// -// ); -// }; - -// export default AdminDashboardPage; diff --git a/components/AdminDashboardPage/index.tsx b/components/AdminDashboardPage/index.tsx new file mode 100644 index 0000000..df09778 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default AdminDashboardPage; diff --git a/components/modules/AdminDashboard/_modules/BestArtist/index.jsx b/components/modules/AdminDashboard/_modules/BestArtist/index.jsx deleted file mode 100644 index 360ff5b..0000000 --- a/components/modules/AdminDashboard/_modules/BestArtist/index.jsx +++ /dev/null @@ -1,40 +0,0 @@ -// import React from "react"; -// import { songs } from "../../../utils/dummy"; -// import numberConverter from "../../../utils/helpers/numberConverter"; -// import ArtistCard from "../Cards/ArtistCard"; - -// const BestArtist = () => { -// return ( -//
-//

Best Artist

-//
-// -// -// -//
-//
-// ); -// }; - -// export default BestArtist; diff --git a/components/modules/AdminDashboard/_modules/BestArtist/index.tsx b/components/modules/AdminDashboard/_modules/BestArtist/index.tsx new file mode 100644 index 0000000..f799c41 --- /dev/null +++ b/components/modules/AdminDashboard/_modules/BestArtist/index.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { songs } from "../../../utils/dummy"; +import numberConverter from "../../../utils/helpers/numberConverter"; +import ArtistCard from "../Cards/ArtistCard"; + +const BestArtist = () => { + return ( +
+

Best Artist

+
+ + + +
+
+ ); +}; + +export default BestArtist; diff --git a/components/modules/AdminDashboard/_modules/Cards/ArtistCard.jsx b/components/modules/AdminDashboard/_modules/Cards/ArtistCard.jsx deleted file mode 100644 index 863a8cf..0000000 --- a/components/modules/AdminDashboard/_modules/Cards/ArtistCard.jsx +++ /dev/null @@ -1,43 +0,0 @@ -// import React from "react"; -// import PropTypes from "prop-types"; - -// const ArtistCard = ({ -// artistAvatar, -// artistName, -// date, -// streams, -// streamsBgClassName, -// borderColorClassName, -// }) => { -// return ( -//
-//
-// {artistName} -//
-//

{artistName}

-//

{date}

-//
-//
-//

-// {streams} -//

-//
-// ); -// }; - -// ArtistCard.propTypes = { -// artistAvatar: PropTypes.string.isRequired, -// artistName: PropTypes.string.isRequired, -// date: PropTypes.string.isRequired, -// streams: PropTypes.string.isRequired, -// streamsBgClassName: PropTypes.string.isRequired, -// borderColorClassName: PropTypes.string.isRequired, -// }; - -// export default ArtistCard; diff --git a/components/modules/AdminDashboard/_modules/Cards/ArtistCard.tsx b/components/modules/AdminDashboard/_modules/Cards/ArtistCard.tsx new file mode 100644 index 0000000..30d0b0a --- /dev/null +++ b/components/modules/AdminDashboard/_modules/Cards/ArtistCard.tsx @@ -0,0 +1,43 @@ +/* eslint-disable @next/next/no-img-element */ +import React, { FC } from "react"; + +interface ArtistCardProps { + artistAvatar: string; + artistName: string; + date: string; + streams: string; + streamsBgClassName: string; + borderColorClassName: string; +} + +const ArtistCard: FC = ({ + artistAvatar, + artistName, + date, + streams, + streamsBgClassName, + borderColorClassName, +}) => { + return ( +
+
+ {artistName} +
+

{artistName}

+

{date}

+
+
+

+ {streams} +

+
+ ); +}; + +export default ArtistCard; diff --git a/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx b/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx deleted file mode 100644 index e9d4aef..0000000 --- a/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx +++ /dev/null @@ -1,45 +0,0 @@ -// import React from "react"; -// import { VInfo, VStatsChart } from "../../../__modules/Vectors"; -// import PropTypes from "prop-types"; - -// const MusicStatisticCard = ({ -// statTitle, -// statValue, -// statIcon, -// iconColorClassName, -// iconBgClassName, -// }) => { -// return ( -//
-//
-//

{statTitle}

-//

-// -//

-//
-//
-//

-// -//

-//
-//

{statValue}

-//

-// {statIcon} -//

-//
-//
-//
-// ); -// }; - -// MusicStatisticCard.propTypes = { -// statTitle: PropTypes.string.isRequired, -// statValue: PropTypes.string.isRequired, -// statIcon: PropTypes.element.isRequired, -// iconColorClassName: PropTypes.string.isRequired, -// iconBgClassName: PropTypes.string.isRequired, -// }; - -// export default MusicStatisticCard; diff --git a/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.tsx b/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.tsx new file mode 100644 index 0000000..c866dac --- /dev/null +++ b/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.tsx @@ -0,0 +1,44 @@ +import React, { FC, ReactNode } from "react"; +import { VInfo, VStatsChart } from "../../../__modules/Vectors"; + +interface MusicStatisticCardProps { + statTitle: string; + statValue: string; + statIcon: ReactNode; + iconColorClassName: string; + iconBgClassName: string; +} + +const MusicStatisticCard: FC = ({ + statTitle, + statValue, + statIcon, + iconColorClassName, + iconBgClassName, +}) => { + return ( +
+
+

{statTitle}

+

+ +

+
+
+

+ +

+
+

{statValue}

+

+ {statIcon} +

+
+
+
+ ); +}; + +export default MusicStatisticCard; diff --git a/components/modules/AdminDashboard/_modules/RevenueStatChart/index.jsx b/components/modules/AdminDashboard/_modules/RevenueStatChart/index.jsx deleted file mode 100644 index 4fb048b..0000000 --- a/components/modules/AdminDashboard/_modules/RevenueStatChart/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -// import React from "react"; -// import Chart from "chart.js/auto"; -// import { Bar } from "react-chartjs-2"; -// import { dummyStat } from "../../../utils/dummy/dummyStat"; - -// const RevenueStatChart = () => { -// return ( -//
-// -//
-// ); -// }; - -// export default RevenueStatChart; diff --git a/components/modules/AdminDashboard/_modules/RevenueStatChart/index.tsx b/components/modules/AdminDashboard/_modules/RevenueStatChart/index.tsx new file mode 100644 index 0000000..c81a682 --- /dev/null +++ b/components/modules/AdminDashboard/_modules/RevenueStatChart/index.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import Chart from "chart.js/auto"; +import { Bar } from "react-chartjs-2"; +import { dummyStat } from "../../../utils/dummy/dummyStat"; + +const RevenueStatChart = () => { + return ( +
+ +
+ ); +}; + +export default RevenueStatChart; diff --git a/components/modules/AdminDashboard/index.jsx b/components/modules/AdminDashboard/index.jsx deleted file mode 100644 index 2317393..0000000 --- a/components/modules/AdminDashboard/index.jsx +++ /dev/null @@ -1,62 +0,0 @@ -// import React from "react"; -// import numberConverter from "../utils/helpers/numberConverter"; -// import { VImageCard, VRadar, VRefund, VTag } from "../__modules/Vectors"; -// import MusicStatisticCard from "./_modules/Cards/MusicStatisticCard"; -// import PropTypes from "prop-types"; -// import RevenueStatChart from "./_modules/RevenueStatChart"; -// import BestArtist from "./_modules/BestArtist"; - -// const AdminDashboard = ({ isTopNav }) => { -// return ( -//
-//
-// } -// iconColorClassName="text-primary" -// iconBgClassName="bg-primary" -// /> -// } -// iconColorClassName="text-[#1ee2ac]" -// iconBgClassName="bg-[#1ee2ac]" -// /> -// } -// iconColorClassName="text-[#ff7750]" -// iconBgClassName="bg-[#ff7750]" -// /> -// } -// iconColorClassName="text-[#00d0ff]" -// iconBgClassName="bg-[#00d0ff]" -// /> -//
-//
-//
-// -//
-//
-// -//
-//
-//
-// ); -// }; - -// AdminDashboard.propTypes = { -// isTopNav: PropTypes.bool.isRequired, -// }; - -// export default AdminDashboard; diff --git a/components/modules/AdminDashboard/index.tsx b/components/modules/AdminDashboard/index.tsx new file mode 100644 index 0000000..861a542 --- /dev/null +++ b/components/modules/AdminDashboard/index.tsx @@ -0,0 +1,61 @@ +import React, { FC } from "react"; +import numberConverter from "../utils/helpers/numberConverter"; +import { VImageCard, VRadar, VRefund, VTag } from "../__modules/Vectors"; +import MusicStatisticCard from "./_modules/Cards/MusicStatisticCard"; +import RevenueStatChart from "./_modules/RevenueStatChart"; +import BestArtist from "./_modules/BestArtist"; + +interface AdminDashboardProps { + isTopNav: boolean; +} + +const AdminDashboard: FC = ({ isTopNav }) => { + return ( +
+
+ } + iconColorClassName="text-primary" + iconBgClassName="bg-primary" + /> + } + iconColorClassName="text-[#1ee2ac]" + iconBgClassName="bg-[#1ee2ac]" + /> + } + iconColorClassName="text-[#ff7750]" + iconBgClassName="bg-[#ff7750]" + /> + } + iconColorClassName="text-[#00d0ff]" + iconBgClassName="bg-[#00d0ff]" + /> +
+
+
+ +
+
+ +
+
+
+ ); +}; + +export default AdminDashboard; diff --git a/components/modules/utils/dummy/dummyStat.js b/components/modules/utils/dummy/dummyStat.js deleted file mode 100644 index a9a7711..0000000 --- a/components/modules/utils/dummy/dummyStat.js +++ /dev/null @@ -1,17 +0,0 @@ -// export const dummyStat = { -// duration: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], -// stat: { -// revenue: { -// id: 1, -// name: "Revenue", -// dataPerMonth: [10, 20, 30, 40, 50, 60, 50, 40, 30, 20, 10], -// currency: "USD", -// }, -// netProfit: { -// id: 2, -// name: "Net Profit", -// dataPerMonth: [5, 15, 25, 35, 45, 55, 45, 35, 25, 15, 5], -// currency: "USD", -// }, -// }, -// }; diff --git a/components/modules/utils/dummy/dummyStat.ts b/components/modules/utils/dummy/dummyStat.ts new file mode 100644 index 0000000..dff2aa3 --- /dev/null +++ b/components/modules/utils/dummy/dummyStat.ts @@ -0,0 +1,17 @@ +export const dummyStat = { + duration: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], + stat: { + revenue: { + id: 1, + name: "Revenue", + dataPerMonth: [10, 20, 30, 40, 50, 60, 50, 40, 30, 20, 10], + currency: "USD", + }, + netProfit: { + id: 2, + name: "Net Profit", + dataPerMonth: [5, 15, 25, 35, 45, 55, 45, 35, 25, 15, 5], + currency: "USD", + }, + }, +}; diff --git a/components/modules/utils/dummy/index.js b/components/modules/utils/dummy/index.js deleted file mode 100644 index 5556e22..0000000 --- a/components/modules/utils/dummy/index.js +++ /dev/null @@ -1,42 +0,0 @@ -// const URL = 'https://p.scdn.co/mp3-preview/40821a698364f0bf84b15bcc71a40ef813fff0e1?cid=f6a40776580943a7bc5173125a1e8832' - -// export const songs = [ -// { -// title: 'DJ Khaled Featuring', -// artist: 'Dj Khaled', -// audioSrc: URL, - -// image: 'https://api.lorem.space/image/album?hash=3173' -// }, -// { -// title: 'DJ Khaled Featuring', -// artist: 'Cigarette after Sex', -// audioSrc: URL, -// image: 'https://api.lorem.space/image/album?hash=3172' -// }, -// { -// title: 'DJ Khaled Featuring', -// artist: 'Edtyta Gomiak', -// audioSrc: URL, -// image: 'https://api.lorem.space/image/album?hash=3175' -// }, -// { -// title: 'DJ Khaled Featuring', -// artist: 'Tintin Mihigo', -// audioSrc: URL, -// image: 'https://api.lorem.space/image/album?hash=3154' -// }, -// { -// title: 'DJ Khaled Featuring', -// artist: 'Samurai Thung', -// audioSrc: URL, -// image: 'https://api.lorem.space/image/album?hash=3154' -// }, -// { -// title: 'DJ Khaled Featuring', -// artist: 'Albatros Country', -// audioSrc: URL, -// image: 'https://api.lorem.space/image/album?hash=3154' -// }, - -// ] diff --git a/components/modules/utils/dummy/index.ts b/components/modules/utils/dummy/index.ts new file mode 100644 index 0000000..e299eb3 --- /dev/null +++ b/components/modules/utils/dummy/index.ts @@ -0,0 +1,42 @@ +const URL = + "https://p.scdn.co/mp3-preview/40821a698364f0bf84b15bcc71a40ef813fff0e1?cid=f6a40776580943a7bc5173125a1e8832"; + +export const songs = [ + { + title: "DJ Khaled Featuring", + artist: "Dj Khaled", + audioSrc: URL, + + image: "https://api.lorem.space/image/album?hash=3173", + }, + { + title: "DJ Khaled Featuring", + artist: "Cigarette after Sex", + audioSrc: URL, + image: "https://api.lorem.space/image/album?hash=3172", + }, + { + title: "DJ Khaled Featuring", + artist: "Edtyta Gomiak", + audioSrc: URL, + image: "https://api.lorem.space/image/album?hash=3175", + }, + { + title: "DJ Khaled Featuring", + artist: "Tintin Mihigo", + audioSrc: URL, + image: "https://api.lorem.space/image/album?hash=3154", + }, + { + title: "DJ Khaled Featuring", + artist: "Samurai Thung", + audioSrc: URL, + image: "https://api.lorem.space/image/album?hash=3154", + }, + { + title: "DJ Khaled Featuring", + artist: "Albatros Country", + audioSrc: URL, + image: "https://api.lorem.space/image/album?hash=3154", + }, +]; diff --git a/components/modules/utils/helpers/numberConverter.js b/components/modules/utils/helpers/numberConverter.js deleted file mode 100644 index 029f765..0000000 --- a/components/modules/utils/helpers/numberConverter.js +++ /dev/null @@ -1,16 +0,0 @@ -// const M_NUMBER_UNIT = 1000000; -// const K_NUMBER_UNIT = 1000; - -// const numberConverter = (value) => { -// if (value >= M_NUMBER_UNIT) { -// const convertedNumber = (value / M_NUMBER_UNIT).toFixed(2) + "M"; -// return convertedNumber; -// } -// if (value >= K_NUMBER_UNIT) { -// const convertedNumber = (value / K_NUMBER_UNIT).toFixed(2) + "K"; -// return convertedNumber; -// } -// return `${value}`; -// }; - -// export default numberConverter; diff --git a/components/modules/utils/helpers/numberConverter.ts b/components/modules/utils/helpers/numberConverter.ts new file mode 100644 index 0000000..8012880 --- /dev/null +++ b/components/modules/utils/helpers/numberConverter.ts @@ -0,0 +1,16 @@ +const M_NUMBER_UNIT = 1000000; +const K_NUMBER_UNIT = 1000; + +const numberConverter = (value: number): string => { + if (value >= M_NUMBER_UNIT) { + const convertedNumber = (value / M_NUMBER_UNIT).toFixed(2) + "M"; + return convertedNumber; + } + if (value >= K_NUMBER_UNIT) { + const convertedNumber = (value / K_NUMBER_UNIT).toFixed(2) + "K"; + return convertedNumber; + } + return `${value}`; +}; + +export default numberConverter; diff --git a/package-lock.json b/package-lock.json index 49fa0b9..dd2529f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "eslint-config-next": "13.0.7", "next": "13.0.7", "react": "18.2.0", + "react-chartjs-2": "^5.1.0", "react-dom": "18.2.0", "react-icons": "^4.7.1", "recoil": "^0.7.6", @@ -4884,6 +4885,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.1.0.tgz", + "integrity": "sha512-Gt76b7+p7nMQq0MvkWfUSNAzIm/TLAnAO32zIpSzrQyc9JWRbVCtq8qOzPJmfpDzPcIJ7Y9Gp5g+VdTRrGITsQ==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -8944,6 +8954,12 @@ "loose-envify": "^1.1.0" } }, + "react-chartjs-2": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.1.0.tgz", + "integrity": "sha512-Gt76b7+p7nMQq0MvkWfUSNAzIm/TLAnAO32zIpSzrQyc9JWRbVCtq8qOzPJmfpDzPcIJ7Y9Gp5g+VdTRrGITsQ==", + "requires": {} + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/package.json b/package.json index 7325735..5df1a84 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "eslint-config-next": "13.0.7", "next": "13.0.7", "react": "18.2.0", + "react-chartjs-2": "^5.1.0", "react-dom": "18.2.0", "react-icons": "^4.7.1", "recoil": "^0.7.6", From 26cea7503122cc52044fd247db2720eeb4596d6a Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 09:36:55 +0200 Subject: [PATCH 2/9] feat: page's file migrated to TS --- pages/Error/{404.js => 404.tsx} | 0 pages/Error/{500.js => 500.tsx} | 0 pages/account/{edit.js => edit.tsx} | 0 pages/account/{profile.js => profile.tsx} | 0 pages/admin/{addnewsong.js => addnewsong.tsx} | 0 pages/admin/{category.js => category.tsx} | 0 pages/admin/dashboard.js | 14 -------------- pages/admin/dashboard.tsx | 12 ++++++++++++ pages/admin/{singerlist.js => singerlist.tsx} | 0 pages/{album.js => album.tsx} | 0 pages/api/hello.js | 5 ----- pages/{confirm-email.js => confirm-email.tsx} | 0 pages/{latest.js => latest.tsx} | 0 pages/{login.js => login.tsx} | 0 pages/{maintenance.js => maintenance.tsx} | 0 pages/{reset-password.js => reset-password.tsx} | 0 pages/{signup.js => signup.tsx} | 0 17 files changed, 12 insertions(+), 19 deletions(-) rename pages/Error/{404.js => 404.tsx} (100%) rename pages/Error/{500.js => 500.tsx} (100%) rename pages/account/{edit.js => edit.tsx} (100%) rename pages/account/{profile.js => profile.tsx} (100%) rename pages/admin/{addnewsong.js => addnewsong.tsx} (100%) rename pages/admin/{category.js => category.tsx} (100%) delete mode 100644 pages/admin/dashboard.js create mode 100644 pages/admin/dashboard.tsx rename pages/admin/{singerlist.js => singerlist.tsx} (100%) rename pages/{album.js => album.tsx} (100%) delete mode 100644 pages/api/hello.js rename pages/{confirm-email.js => confirm-email.tsx} (100%) rename pages/{latest.js => latest.tsx} (100%) rename pages/{login.js => login.tsx} (100%) rename pages/{maintenance.js => maintenance.tsx} (100%) rename pages/{reset-password.js => reset-password.tsx} (100%) rename pages/{signup.js => signup.tsx} (100%) diff --git a/pages/Error/404.js b/pages/Error/404.tsx similarity index 100% rename from pages/Error/404.js rename to pages/Error/404.tsx diff --git a/pages/Error/500.js b/pages/Error/500.tsx similarity index 100% rename from pages/Error/500.js rename to pages/Error/500.tsx diff --git a/pages/account/edit.js b/pages/account/edit.tsx similarity index 100% rename from pages/account/edit.js rename to pages/account/edit.tsx diff --git a/pages/account/profile.js b/pages/account/profile.tsx similarity index 100% rename from pages/account/profile.js rename to pages/account/profile.tsx diff --git a/pages/admin/addnewsong.js b/pages/admin/addnewsong.tsx similarity index 100% rename from pages/admin/addnewsong.js rename to pages/admin/addnewsong.tsx diff --git a/pages/admin/category.js b/pages/admin/category.tsx similarity index 100% rename from pages/admin/category.js rename to pages/admin/category.tsx diff --git a/pages/admin/dashboard.js b/pages/admin/dashboard.js deleted file mode 100644 index 7d9e277..0000000 --- a/pages/admin/dashboard.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -// import AdminDashboardPage from "../../components/AdminDashboardPage"; - -const dashboard = () => { - // return ( - //
- // - //
- // ); - - return <>; -}; - -export default dashboard; diff --git a/pages/admin/dashboard.tsx b/pages/admin/dashboard.tsx new file mode 100644 index 0000000..75873f7 --- /dev/null +++ b/pages/admin/dashboard.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import AdminDashboardPage from "../../components/AdminDashboardPage"; + +const dashboard = () => { + return ( +
+ +
+ ); +}; + +export default dashboard; diff --git a/pages/admin/singerlist.js b/pages/admin/singerlist.tsx similarity index 100% rename from pages/admin/singerlist.js rename to pages/admin/singerlist.tsx diff --git a/pages/album.js b/pages/album.tsx similarity index 100% rename from pages/album.js rename to pages/album.tsx diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index b049406..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// // Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -// export default function handler(req, res) { -// res.status(200).json({ name: 'John Doe' }) -// } diff --git a/pages/confirm-email.js b/pages/confirm-email.tsx similarity index 100% rename from pages/confirm-email.js rename to pages/confirm-email.tsx diff --git a/pages/latest.js b/pages/latest.tsx similarity index 100% rename from pages/latest.js rename to pages/latest.tsx diff --git a/pages/login.js b/pages/login.tsx similarity index 100% rename from pages/login.js rename to pages/login.tsx diff --git a/pages/maintenance.js b/pages/maintenance.tsx similarity index 100% rename from pages/maintenance.js rename to pages/maintenance.tsx diff --git a/pages/reset-password.js b/pages/reset-password.tsx similarity index 100% rename from pages/reset-password.js rename to pages/reset-password.tsx diff --git a/pages/signup.js b/pages/signup.tsx similarity index 100% rename from pages/signup.js rename to pages/signup.tsx From b14893f20770561eff160f60fc97ac710acb3ba4 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 09:58:58 +0200 Subject: [PATCH 3/9] feat: migrate albumPage --- components/AlbumPage/index.jsx | 61 --------------- components/AlbumPage/index.tsx | 61 +++++++++++++++ .../HotSongs/HotSongByLocation/index.jsx | 33 --------- .../HotSongs/HotSongByLocation/index.tsx | 39 ++++++++++ .../modules/HotSongs/HotSongsCard/index.jsx | 18 ----- .../modules/HotSongs/HotSongsCard/index.tsx | 23 ++++++ components/modules/HotSongs/index.jsx | 16 ---- components/modules/HotSongs/index.tsx | 17 +++++ .../modules/__modules__/Card/SongCard.jsx | 23 ------ .../modules/__modules__/Card/SongCard.tsx | 28 +++++++ .../modules/__modules__/Carousel/index.jsx | 68 ----------------- .../modules/__modules__/Carousel/index.tsx | 74 +++++++++++++++++++ components/modules/hooks/index.js | 3 - components/modules/hooks/index.ts | 3 + components/modules/hooks/useSideScroll.js | 17 ----- components/modules/hooks/useSideScroll.ts | 24 ++++++ types/index.ts | 6 ++ 17 files changed, 275 insertions(+), 239 deletions(-) delete mode 100644 components/AlbumPage/index.jsx create mode 100644 components/AlbumPage/index.tsx delete mode 100644 components/modules/HotSongs/HotSongByLocation/index.jsx create mode 100644 components/modules/HotSongs/HotSongByLocation/index.tsx delete mode 100644 components/modules/HotSongs/HotSongsCard/index.jsx create mode 100644 components/modules/HotSongs/HotSongsCard/index.tsx delete mode 100644 components/modules/HotSongs/index.jsx create mode 100644 components/modules/HotSongs/index.tsx delete mode 100644 components/modules/__modules__/Card/SongCard.jsx create mode 100644 components/modules/__modules__/Card/SongCard.tsx delete mode 100644 components/modules/__modules__/Carousel/index.jsx create mode 100644 components/modules/__modules__/Carousel/index.tsx delete mode 100644 components/modules/hooks/index.js create mode 100644 components/modules/hooks/index.ts delete mode 100644 components/modules/hooks/useSideScroll.js create mode 100644 components/modules/hooks/useSideScroll.ts create mode 100644 types/index.ts diff --git a/components/AlbumPage/index.jsx b/components/AlbumPage/index.jsx deleted file mode 100644 index 8e680d8..0000000 --- a/components/AlbumPage/index.jsx +++ /dev/null @@ -1,61 +0,0 @@ -// 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 ( -//
-// -//
-//
-//
-// -//
-//

{topSongsData[2].artist}

-//

{topSongsData[2].title}

-//
-//
-//
-// -//
-// -//
-//
-// {topSongsData.map((song) => { -// return ; -// })} -//
-//
-// -// -//
-// ); -// }; - -// export default AlbumPage; diff --git a/components/AlbumPage/index.tsx b/components/AlbumPage/index.tsx new file mode 100644 index 0000000..3627bfa --- /dev/null +++ b/components/AlbumPage/index.tsx @@ -0,0 +1,61 @@ +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 ( +
+ +
+
+
+ +
+

{topSongsData[2].artist}

+

{topSongsData[2].title}

+
+
+
+ +
+ +
+
+ {topSongsData.map((song) => { + return ; + })} +
+
+ + +
+ ); +}; + +export default AlbumPage; diff --git a/components/modules/HotSongs/HotSongByLocation/index.jsx b/components/modules/HotSongs/HotSongByLocation/index.jsx deleted file mode 100644 index 00e2f6a..0000000 --- a/components/modules/HotSongs/HotSongByLocation/index.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// import React from "react"; -// import Carousel from "../../__modules__/Carousel"; - -// const HotSongsByLocation = ({ data, location }) => { -// return ( -// -// {data.map((song) => { -// const { id, title, img, artist } = song; -// return ( -//
-// {artist} -//
-//

{title}

-//

{artist}

-//
-//
-// ); -// })} -// -// ); -// }; - -// export default HotSongsByLocation; diff --git a/components/modules/HotSongs/HotSongByLocation/index.tsx b/components/modules/HotSongs/HotSongByLocation/index.tsx new file mode 100644 index 0000000..5276d90 --- /dev/null +++ b/components/modules/HotSongs/HotSongByLocation/index.tsx @@ -0,0 +1,39 @@ +import React, { FC } from "react"; +import { ISong } from "../../../../types"; +import Carousel from "../../__modules__/Carousel"; + +interface HotSongByLocationProps { + data: ISong[]; + location: string; +} + +const HotSongsByLocation: FC = ({ data, location }) => { + return ( + + {data.map((song) => { + const { id, title, img, artist } = song; + return ( +
+ {artist} +
+

{title}

+

{artist}

+
+
+ ); + })} + + ); +}; + +export default HotSongsByLocation; diff --git a/components/modules/HotSongs/HotSongsCard/index.jsx b/components/modules/HotSongs/HotSongsCard/index.jsx deleted file mode 100644 index d6fd39a..0000000 --- a/components/modules/HotSongs/HotSongsCard/index.jsx +++ /dev/null @@ -1,18 +0,0 @@ -// import React from "react"; -// import SongCard from "../../__modules__/Card/SongCard"; -// import Carousel from "../../__modules__/Carousel"; - -// const HotSongsCard = ({ data }) => { -// return ( -// -// {data.map((song) => { -// return ; -// })} -// -// ); -// }; - -// export default HotSongsCard; diff --git a/components/modules/HotSongs/HotSongsCard/index.tsx b/components/modules/HotSongs/HotSongsCard/index.tsx new file mode 100644 index 0000000..633ce3a --- /dev/null +++ b/components/modules/HotSongs/HotSongsCard/index.tsx @@ -0,0 +1,23 @@ +import React, { FC } from "react"; +import { ISong } from "../../../../types"; +import SongCard from "../../__modules__/Card/SongCard"; +import Carousel from "../../__modules__/Carousel"; + +interface HotSongsCardProps { + data: ISong[]; +} + +const HotSongsCard: FC = ({ data }) => { + return ( + + {data.map((song) => { + return ; + })} + + ); +}; + +export default HotSongsCard; diff --git a/components/modules/HotSongs/index.jsx b/components/modules/HotSongs/index.jsx deleted file mode 100644 index df4774f..0000000 --- a/components/modules/HotSongs/index.jsx +++ /dev/null @@ -1,16 +0,0 @@ -// import React, { useState } from "react"; -// import { topSongsData } from "../../dummy_data/topSongsData"; -// import HotSongsByLocation from "./HotSongByLocation"; -// import HotSongsCard from "./HotSongsCard"; - -// const HotSongs = () => { -// const [data, setData] = useState(topSongsData.slice(0, 12)); -// return ( -//
-// -// -//
-// ); -// }; - -// export default HotSongs; diff --git a/components/modules/HotSongs/index.tsx b/components/modules/HotSongs/index.tsx new file mode 100644 index 0000000..d222d9b --- /dev/null +++ b/components/modules/HotSongs/index.tsx @@ -0,0 +1,17 @@ +import React, { useState } from "react"; +import { ISong } from "../../../types"; +import { topSongsData } from "../../dummy_data/topSongsData"; +import HotSongsByLocation from "./HotSongByLocation"; +import HotSongsCard from "./HotSongsCard"; + +const HotSongs = () => { + const [data, setData] = useState(topSongsData.slice(0, 12)); + return ( +
+ + +
+ ); +}; + +export default HotSongs; diff --git a/components/modules/__modules__/Card/SongCard.jsx b/components/modules/__modules__/Card/SongCard.jsx deleted file mode 100644 index 579c686..0000000 --- a/components/modules/__modules__/Card/SongCard.jsx +++ /dev/null @@ -1,23 +0,0 @@ -// import React from "react"; - -// const SongCard = ({ song }) => { -// const { id, img, artist, title } = song; -// return ( -//
-// {artist} -//
-//

{title}

-//

{artist}

-//
-//
-// ); -// }; - -// export default SongCard; diff --git a/components/modules/__modules__/Card/SongCard.tsx b/components/modules/__modules__/Card/SongCard.tsx new file mode 100644 index 0000000..8366ece --- /dev/null +++ b/components/modules/__modules__/Card/SongCard.tsx @@ -0,0 +1,28 @@ +import React, { FC } from "react"; +import { ISong } from "../../../../types"; + +interface SongCardProps { + song: ISong; +} + +const SongCard: FC = ({ song }) => { + const { id, img, artist, title } = song; + return ( +
+ {artist} +
+

{title}

+

{artist}

+
+
+ ); +}; + +export default SongCard; diff --git a/components/modules/__modules__/Carousel/index.jsx b/components/modules/__modules__/Carousel/index.jsx deleted file mode 100644 index 8c41e36..0000000 --- a/components/modules/__modules__/Carousel/index.jsx +++ /dev/null @@ -1,68 +0,0 @@ -// import React, { useRef } from "react"; -// import { useSideScroll } from "../../hooks"; -// import { ArrowLeftIcon, ArrowRightIcon } from "../../__modules/Vectors"; -// import PropTypes from "prop-types"; - -// const Carousel = ({ className, title, children, height }) => { -// const scrollContainer = useRef(null); -// const sideScroll = useSideScroll(); - -// const onScrollLeft = () => { -// sideScroll( -// scrollContainer.current, -// 40, -// 200, -// -scrollContainer.current.offsetWidth -// ); -// }; - -// const onScrollRight = () => { -// sideScroll( -// scrollContainer.current, -// 40, -// 200, -// scrollContainer.current.offsetWidth -// ); -// }; -// return ( -//
-//
-//

{title}

-//
-//
null} -// className="bg-primary p-2 text-white rounded-full mx-1 cursor-pointer hover:bg-white hover:shadow-xl hover:text-primary transition-all" -// > -// -//
-//
null} -// className="bg-primary p-2 text-white rounded-full mx-1 cursor-pointer hover:bg-white hover:shadow-xl hover:text-primary transition-all" -// > -// -//
-//
-//
-//
-// {children} -//
-//
-// ); -// }; - -// Carousel.propTypes = { -// className: PropTypes.string.isRequired, -// title: PropTypes.string.isRequired, -// children: PropTypes.element.isRequired, -// height: PropTypes.number, -// }; - -// export default Carousel; diff --git a/components/modules/__modules__/Carousel/index.tsx b/components/modules/__modules__/Carousel/index.tsx new file mode 100644 index 0000000..4040c06 --- /dev/null +++ b/components/modules/__modules__/Carousel/index.tsx @@ -0,0 +1,74 @@ +import React, { FC, ReactNode, useRef } from "react"; +import { useSideScroll } from "../../hooks"; +import { ArrowLeftIcon, ArrowRightIcon } from "../../__modules/Vectors"; + +interface CarouselProps { + className: string; + title: string; + children: ReactNode; + height?: number; +} + +const Carousel: FC = ({ + className, + title, + children, + height, +}) => { + const scrollContainer = useRef(null); + const sideScroll = useSideScroll(); + + const onScrollLeft = () => { + sideScroll( + scrollContainer.current, + 40, + 200, + scrollContainer.current?.offsetWidth + ? -scrollContainer.current?.offsetWidth + : 0 + ); + }; + + const onScrollRight = () => { + sideScroll( + scrollContainer.current, + 40, + 200, + scrollContainer.current?.offsetWidth + ); + }; + return ( +
+
+

{title}

+
+
null} + className="bg-primary p-2 text-white rounded-full mx-1 cursor-pointer hover:bg-white hover:shadow-xl hover:text-primary transition-all" + > + +
+
null} + className="bg-primary p-2 text-white rounded-full mx-1 cursor-pointer hover:bg-white hover:shadow-xl hover:text-primary transition-all" + > + +
+
+
+
+ {children} +
+
+ ); +}; + +export default Carousel; diff --git a/components/modules/hooks/index.js b/components/modules/hooks/index.js deleted file mode 100644 index 6c4a348..0000000 --- a/components/modules/hooks/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// import useSideScroll from "./useSideScroll"; - -// export { useSideScroll }; diff --git a/components/modules/hooks/index.ts b/components/modules/hooks/index.ts new file mode 100644 index 0000000..81122fb --- /dev/null +++ b/components/modules/hooks/index.ts @@ -0,0 +1,3 @@ +import useSideScroll from "./useSideScroll"; + +export { useSideScroll }; diff --git a/components/modules/hooks/useSideScroll.js b/components/modules/hooks/useSideScroll.js deleted file mode 100644 index c8a5035..0000000 --- a/components/modules/hooks/useSideScroll.js +++ /dev/null @@ -1,17 +0,0 @@ -// const useSideScroll = () => { -// const sideScroll = (element, speed, distance, step = 10) => { -// let scrollAmount = 0; - -// const slideTimer = setInterval(() => { -// element.scrollLeft += step; -// scrollAmount += Math.abs(step); -// if (scrollAmount >= distance) { -// clearInterval(slideTimer); -// } -// }, speed); -// }; - -// return sideScroll; -// }; - -// export default useSideScroll; diff --git a/components/modules/hooks/useSideScroll.ts b/components/modules/hooks/useSideScroll.ts new file mode 100644 index 0000000..e21c921 --- /dev/null +++ b/components/modules/hooks/useSideScroll.ts @@ -0,0 +1,24 @@ +const useSideScroll = () => { + const sideScroll = ( + element: HTMLDivElement | null, + speed: number, + distance: number, + step = 10 + ) => { + let scrollAmount = 0; + + const slideTimer = setInterval(() => { + if (element?.scrollLeft) { + element.scrollLeft += step; + scrollAmount += Math.abs(step); + if (scrollAmount >= distance) { + clearInterval(slideTimer); + } + } + }, speed); + }; + + return sideScroll; +}; + +export default useSideScroll; diff --git a/types/index.ts b/types/index.ts new file mode 100644 index 0000000..2449728 --- /dev/null +++ b/types/index.ts @@ -0,0 +1,6 @@ +export interface ISong { + id: string | number; + img: string; + artist: string; + title: string; +} From 4bfb92db07a3e74563d00ce3a42b27f0fd8557f0 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:04:30 +0200 Subject: [PATCH 4/9] fix: eslint rules applied --- .eslintrc.json | 5 ++++- components/AlbumPage/index.tsx | 6 ++++-- components/modules/HotSongs/HotSongsCard/index.tsx | 4 ++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index dffe840..b771fb1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,6 @@ { - "extends": ["next"] + "extends": ["next"], + "rules": { + "@next/next/no-img-element": "off" + } } diff --git a/components/AlbumPage/index.tsx b/components/AlbumPage/index.tsx index 3627bfa..ae523ca 100644 --- a/components/AlbumPage/index.tsx +++ b/components/AlbumPage/index.tsx @@ -32,6 +32,7 @@ const AlbumPage = () => { {topSongsData[2].artist}

{topSongsData[2].artist}

@@ -42,13 +43,14 @@ const AlbumPage = () => { equalizer
- {topSongsData.map((song) => { - return ; + {topSongsData.map((song, index) => { + return ; })}
diff --git a/components/modules/HotSongs/HotSongsCard/index.tsx b/components/modules/HotSongs/HotSongsCard/index.tsx index 633ce3a..cbe9058 100644 --- a/components/modules/HotSongs/HotSongsCard/index.tsx +++ b/components/modules/HotSongs/HotSongsCard/index.tsx @@ -13,8 +13,8 @@ const HotSongsCard: FC = ({ data }) => { className="w-1/2 bg-white px-5 py-5 rounded-xl shadow-xl mobile:w-full mobile:mx-0" title="Hot Songs" > - {data.map((song) => { - return ; + {data.map((song, index) => { + return ; })} ); From 507343575bf94c7e4e334f71c7193943e8215aa4 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:09:44 +0200 Subject: [PATCH 5/9] feat: auth migrated --- components/Auth/ConfirmEmail/index.jsx | 32 ------------ components/Auth/ConfirmEmail/index.tsx | 41 +++++++++++++++ components/Auth/LoginPage/index.jsx | 54 -------------------- components/Auth/LoginPage/index.tsx | 54 ++++++++++++++++++++ components/Auth/ResetPassword/index.jsx | 32 ------------ components/Auth/ResetPassword/index.tsx | 45 +++++++++++++++++ components/Auth/SignupPage/index.jsx | 67 ------------------------- components/Auth/SignupPage/index.tsx | 67 +++++++++++++++++++++++++ 8 files changed, 207 insertions(+), 185 deletions(-) delete mode 100644 components/Auth/ConfirmEmail/index.jsx create mode 100644 components/Auth/ConfirmEmail/index.tsx delete mode 100644 components/Auth/LoginPage/index.jsx create mode 100644 components/Auth/LoginPage/index.tsx delete mode 100644 components/Auth/ResetPassword/index.jsx create mode 100644 components/Auth/ResetPassword/index.tsx delete mode 100644 components/Auth/SignupPage/index.jsx create mode 100644 components/Auth/SignupPage/index.tsx diff --git a/components/Auth/ConfirmEmail/index.jsx b/components/Auth/ConfirmEmail/index.jsx deleted file mode 100644 index 5b14749..0000000 --- a/components/Auth/ConfirmEmail/index.jsx +++ /dev/null @@ -1,32 +0,0 @@ -// import React from 'react' - -// const ConfirmEmail = () => { -// return ( -//
-//
-//
-//
-//
-// Pic -//
-//
-//
-//
-// email -//
-//
-//
-//

Success !

-//

A email has been send to youremail@domain.com. Please check for an email from company and click on the included link to reset your password.

-//
-// -//
- -//
-//
-// ) -// } - -// export default ConfirmEmail diff --git a/components/Auth/ConfirmEmail/index.tsx b/components/Auth/ConfirmEmail/index.tsx new file mode 100644 index 0000000..85c77af --- /dev/null +++ b/components/Auth/ConfirmEmail/index.tsx @@ -0,0 +1,41 @@ +import React from "react"; + +const ConfirmEmail = () => { + return ( +
+
+
+
+
+ Pic +
+
+
+
+ email +
+
+
+

Success !

+

+ A email has been send to youremail@domain.com. Please check for an + email from company and click on the included link to reset your + password. +

+
+ +
+
+
+ ); +}; + +export default ConfirmEmail; diff --git a/components/Auth/LoginPage/index.jsx b/components/Auth/LoginPage/index.jsx deleted file mode 100644 index e8229d9..0000000 --- a/components/Auth/LoginPage/index.jsx +++ /dev/null @@ -1,54 +0,0 @@ -// import React from "react"; -// import { useRouter } from "next/router"; - -// const LoginPage = () => { -// const router = useRouter(); -// return ( -//
-//
-//
-//

Yokaa

-//

Log In

-//
-//
-//
-//
-// -// -//
-//
-// -// -//
-//
-//
-//
-// You don't have an account ? -// router.push("/signup")} -// > -// Sign up -// -//
-// -//
-//
-// ); -// }; - -// export default LoginPage; diff --git a/components/Auth/LoginPage/index.tsx b/components/Auth/LoginPage/index.tsx new file mode 100644 index 0000000..4b7e8ed --- /dev/null +++ b/components/Auth/LoginPage/index.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { useRouter } from "next/router"; + +const LoginPage = () => { + const router = useRouter(); + return ( +
+
+
+

Yokaa

+

Log In

+
+
+
+
+ + +
+
+ + +
+
+
+
+ You don't have an account ? + router.push("/signup")} + > + Sign up + +
+ +
+
+ ); +}; + +export default LoginPage; diff --git a/components/Auth/ResetPassword/index.jsx b/components/Auth/ResetPassword/index.jsx deleted file mode 100644 index 6397b35..0000000 --- a/components/Auth/ResetPassword/index.jsx +++ /dev/null @@ -1,32 +0,0 @@ -// import React from 'react' - -// const ResetPassword = () => { -// return ( -//
-//
-//
-//
-//
-// Pic -//
-//
-//
-//

Reset password

-//

Enter your email address and we'll send you an email with instructions to reset your password

-//
-// -// -//
- -//
-// -//
- -//
-//
-// ) -// } - -// export default ResetPassword diff --git a/components/Auth/ResetPassword/index.tsx b/components/Auth/ResetPassword/index.tsx new file mode 100644 index 0000000..e1febe2 --- /dev/null +++ b/components/Auth/ResetPassword/index.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +const ResetPassword = () => { + return ( +
+
+
+
+
+ Pic +
+
+
+

+ Reset password +

+

+ Enter your email address and we'll send you an email with + instructions to reset your password{" "} +

+
+ + +
+
+ +
+
+
+ ); +}; + +export default ResetPassword; diff --git a/components/Auth/SignupPage/index.jsx b/components/Auth/SignupPage/index.jsx deleted file mode 100644 index 0e46f2a..0000000 --- a/components/Auth/SignupPage/index.jsx +++ /dev/null @@ -1,67 +0,0 @@ -// import React from "react"; -// import { useRouter } from "next/router"; - -// const SignupPage = () => { -// const router = useRouter(); -// return ( -//
-//
-//
-//

Yokaa

-//

Sign Up

-//
-//
-//
-//
-// -// -//
-//
-// -// -//
-//
-// -// -//
-//
-//
-//
-//
-// -// -//
-//

router.push("/login")} className="cursor-pointer"> -// Log In -//

-//
-// -//
-//
-// ); -// }; - -// export default SignupPage; diff --git a/components/Auth/SignupPage/index.tsx b/components/Auth/SignupPage/index.tsx new file mode 100644 index 0000000..3e748e8 --- /dev/null +++ b/components/Auth/SignupPage/index.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { useRouter } from "next/router"; + +const SignupPage = () => { + const router = useRouter(); + return ( +
+
+
+

Yokaa

+

Sign Up

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+

router.push("/login")} className="cursor-pointer"> + Log In +

+
+ +
+
+ ); +}; + +export default SignupPage; From 596f9a49c1e84c5e7fa3e6869efe33e62092366d Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:13:17 +0200 Subject: [PATCH 6/9] fix: resolve lint error --- components/Auth/LoginPage/index.tsx | 2 +- components/Auth/ResetPassword/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Auth/LoginPage/index.tsx b/components/Auth/LoginPage/index.tsx index 4b7e8ed..21b9aa0 100644 --- a/components/Auth/LoginPage/index.tsx +++ b/components/Auth/LoginPage/index.tsx @@ -35,7 +35,7 @@ const LoginPage = () => {
- You don't have an account ? + You don't have an account ? router.push("/signup")} diff --git a/components/Auth/ResetPassword/index.tsx b/components/Auth/ResetPassword/index.tsx index e1febe2..f023ca5 100644 --- a/components/Auth/ResetPassword/index.tsx +++ b/components/Auth/ResetPassword/index.tsx @@ -20,8 +20,8 @@ const ResetPassword = () => { Reset password

- Enter your email address and we'll send you an email with - instructions to reset your password{" "} + Enter your email address and we'll send you an email with + instructions to reset your password

From bca03c4f90d9a37fff7ef7f4d758c018f8d32437 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:18:29 +0200 Subject: [PATCH 7/9] feat: migrate categoryPage --- components/CategoryPage/index.jsx | 15 ----- components/CategoryPage/index.tsx | 15 +++++ components/modules/Category/index.jsx | 88 --------------------------- components/modules/Category/index.tsx | 88 +++++++++++++++++++++++++++ 4 files changed, 103 insertions(+), 103 deletions(-) delete mode 100644 components/CategoryPage/index.jsx create mode 100644 components/CategoryPage/index.tsx delete mode 100644 components/modules/Category/index.jsx create mode 100644 components/modules/Category/index.tsx diff --git a/components/CategoryPage/index.jsx b/components/CategoryPage/index.jsx deleted file mode 100644 index 5c88200..0000000 --- a/components/CategoryPage/index.jsx +++ /dev/null @@ -1,15 +0,0 @@ -// import React, { useState } from "react"; -// import Category from "../modules/Category"; -// import PageCard from "../modules/__modules__/Card/PageCard"; - -// const CategoryPage = () => { -// const [isTopNav, setIsTopNav] = useState(false); - -// return ( -// -// -// -// ); -// }; - -// export default CategoryPage; diff --git a/components/CategoryPage/index.tsx b/components/CategoryPage/index.tsx new file mode 100644 index 0000000..94b9313 --- /dev/null +++ b/components/CategoryPage/index.tsx @@ -0,0 +1,15 @@ +import React, { useState } from "react"; +import Category from "../modules/Category"; +import PageCard from "../modules/__modules__/Card/PageCard"; + +const CategoryPage = () => { + const [isTopNav, setIsTopNav] = useState(false); + + return ( + + + + ); +}; + +export default CategoryPage; diff --git a/components/modules/Category/index.jsx b/components/modules/Category/index.jsx deleted file mode 100644 index 193903c..0000000 --- a/components/modules/Category/index.jsx +++ /dev/null @@ -1,88 +0,0 @@ -// import React from "react"; -// import { VPen, VTrash } from "../__modules/Vectors"; -// import Link from "next/link"; -// import PropTypes from "prop-types"; - -// const Category = ({ isTopNav }) => { -// return ( -//
-//
-//

Category Lists

-// -// -// -//
-//
-//
-// -// -//

entries

-//
-//
-// -// -//
-//
-//
-// -// -// -// -// -// -// -// -// {Array.from({ length: 10 }).map((_, index) => { -// return ( -// -// -// -// -// -// -// ); -// })} -// -//
NoSong CategoryCategory DescriptionAction
{index + 1}Rock songs -// Lorem ipsum, dolor sit amet consectetur adipisicing elit. -// Sunt ! -// -//
-// -// -//
-//
-//
-//
-// ); -// }; - -// Category.propTypes = { -// isTopNav: PropTypes.bool.isRequired, -// }; - -// export default Category; diff --git a/components/modules/Category/index.tsx b/components/modules/Category/index.tsx new file mode 100644 index 0000000..ab6dcde --- /dev/null +++ b/components/modules/Category/index.tsx @@ -0,0 +1,88 @@ +import React, { FC } from "react"; +import { VPen, VTrash } from "../__modules/Vectors"; +import Link from "next/link"; +import PropTypes from "prop-types"; + +interface CategoryProps { + isTopNav: boolean; +} + +const Category: FC = ({ isTopNav }) => { + return ( +
+
+

Category Lists

+ + + +
+
+
+ + +

entries

+
+
+ + +
+
+
+ + + + + + + + + {Array.from({ length: 10 }).map((_, index) => { + return ( + + + + + + + ); + })} + +
NoSong CategoryCategory DescriptionAction
{index + 1}Rock songs + Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Sunt ! + +
+ + +
+
+
+
+ ); +}; + +export default Category; From 145ddc7ee27e3c7f2dc3d24defd098ef1798f927 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:23:38 +0200 Subject: [PATCH 8/9] feat: migrate error pages --- components/ErrorPages/Error400.jsx | 20 -------------------- components/ErrorPages/Error400.tsx | 24 ++++++++++++++++++++++++ components/ErrorPages/Error500.jsx | 21 --------------------- components/ErrorPages/Error500.tsx | 29 +++++++++++++++++++++++++++++ 4 files changed, 53 insertions(+), 41 deletions(-) delete mode 100644 components/ErrorPages/Error400.jsx create mode 100644 components/ErrorPages/Error400.tsx delete mode 100644 components/ErrorPages/Error500.jsx create mode 100644 components/ErrorPages/Error500.tsx diff --git a/components/ErrorPages/Error400.jsx b/components/ErrorPages/Error400.jsx deleted file mode 100644 index ad8f246..0000000 --- a/components/ErrorPages/Error400.jsx +++ /dev/null @@ -1,20 +0,0 @@ -// import React from 'react' -// import { HomeSubMenuIcon } from '../modules/__modules/Vectors/index' -// import error from "../../components/modules/static/images/404.png"; -// const Error400 = () => { -// return ( -//
-//
-// Not Found -//

Oops! This Page is Not Found.

-//

The requested page dose not exist

-//
-// -//

Back to Home

-//
-//
-//
-// ) -// } - -// export default Error400 diff --git a/components/ErrorPages/Error400.tsx b/components/ErrorPages/Error400.tsx new file mode 100644 index 0000000..db45ae4 --- /dev/null +++ b/components/ErrorPages/Error400.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { HomeSubMenuIcon } from "../modules/__modules/Vectors/index"; +import error from "../../components/modules/static/images/404.png"; +const Error400 = () => { + return ( +
+
+ Not Found +

+ Oops! This Page is Not Found. +

+

+ The requested page dose not exist +

+
+ +

Back to Home

+
+
+
+ ); +}; + +export default Error400; diff --git a/components/ErrorPages/Error500.jsx b/components/ErrorPages/Error500.jsx deleted file mode 100644 index fc6b286..0000000 --- a/components/ErrorPages/Error500.jsx +++ /dev/null @@ -1,21 +0,0 @@ -// import React from 'react' -// import { HomeSubMenuIcon } from '../modules/__modules/Vectors/index' -// import error from '../modules/static/images/500.png' -// const Error500 = () => { -// return ( -//
-//
-// Internal Error -//

500

-//

Oops! This Page is Not Working.

-//

The requested is Internal Server Error.

-//
-// -//

Back to Home

-//
-//
-//
-// ) -// } - -// export default Error500 diff --git a/components/ErrorPages/Error500.tsx b/components/ErrorPages/Error500.tsx new file mode 100644 index 0000000..cd45563 --- /dev/null +++ b/components/ErrorPages/Error500.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { HomeSubMenuIcon } from "../modules/__modules/Vectors/index"; +import error from "../modules/static/images/500.png"; +const Error500 = () => { + return ( +
+
+ Internal Error +

500

+

+ Oops! This Page is Not Working. +

+

+ The requested is Internal Server Error. +

+
+ +

Back to Home

+
+
+
+ ); +}; + +export default Error500; From fc7dc027cb62eeeecf351275a686fb02c25d5417 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Wed, 28 Dec 2022 10:43:08 +0200 Subject: [PATCH 9/9] feat: migrate latest --- components/LatestPage/index.jsx | 19 ---- components/LatestPage/index.tsx | 19 ++++ components/Maintenance/Maintenance.jsx | 56 ----------- components/Maintenance/Maintenance.tsx | 69 +++++++++++++ components/Maintenance/index.jsx | 52 ---------- components/Maintenance/index.tsx | 67 +++++++++++++ components/dummy_data/dailySalesData.js | 30 ------ components/dummy_data/dailySalesData.ts | 30 ++++++ components/modules/FeaturedAlbum/index.jsx | 25 ----- components/modules/FeaturedAlbum/index.tsx | 25 +++++ components/modules/Singers/index.jsx | 96 ------------------- components/modules/Singers/index.tsx | 95 ++++++++++++++++++ .../__modules__/Card/FeaturedAlbumCard.jsx | 29 ------ .../__modules__/Card/FeaturedAlbumCard.tsx | 29 ++++++ .../modules/__modules__/Card/PageCard.tsx | 3 - tsconfig.json | 10 +- 16 files changed, 343 insertions(+), 311 deletions(-) delete mode 100644 components/LatestPage/index.jsx create mode 100644 components/LatestPage/index.tsx delete mode 100644 components/Maintenance/Maintenance.jsx create mode 100644 components/Maintenance/Maintenance.tsx delete mode 100644 components/Maintenance/index.jsx create mode 100644 components/Maintenance/index.tsx delete mode 100644 components/dummy_data/dailySalesData.js create mode 100644 components/dummy_data/dailySalesData.ts delete mode 100644 components/modules/FeaturedAlbum/index.jsx create mode 100644 components/modules/FeaturedAlbum/index.tsx delete mode 100644 components/modules/Singers/index.jsx create mode 100644 components/modules/Singers/index.tsx delete mode 100644 components/modules/__modules__/Card/FeaturedAlbumCard.jsx create mode 100644 components/modules/__modules__/Card/FeaturedAlbumCard.tsx diff --git a/components/LatestPage/index.jsx b/components/LatestPage/index.jsx deleted file mode 100644 index f1aed3c..0000000 --- a/components/LatestPage/index.jsx +++ /dev/null @@ -1,19 +0,0 @@ -// import React from "react"; -// import HotSongs from "../modules/HotSongs"; -// import TopSongs from "../modules/TopSongs/TopSongs"; -// import PageCard from "../modules/__modules__/Card/PageCard"; - -// const LatestPage = () => { -// return ( -//
-// -//
-// -// -//
-// -//
-// ); -// }; - -// export default LatestPage; diff --git a/components/LatestPage/index.tsx b/components/LatestPage/index.tsx new file mode 100644 index 0000000..ac36330 --- /dev/null +++ b/components/LatestPage/index.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import HotSongs from "../modules/HotSongs"; +import TopSongs from "../modules/TopSongs/TopSongs"; +import PageCard from "../modules/__modules__/Card/PageCard"; + +const LatestPage = () => { + return ( +
+ null}> +
+ + +
+ +
+ ); +}; + +export default LatestPage; diff --git a/components/Maintenance/Maintenance.jsx b/components/Maintenance/Maintenance.jsx deleted file mode 100644 index 036dd27..0000000 --- a/components/Maintenance/Maintenance.jsx +++ /dev/null @@ -1,56 +0,0 @@ -// import React from 'react' -// import { useRouter } from "next/router"; -// import { -// ExclamationCircle, -// LayoutTopLine, -// Clock -// } from '../modules/__modules/Vectors/index' - -// const Maintenance = () => { -// const router = useRouter(); - -// return ( -//
-//
-//
-// logo -//

We are Currently Performing Maintenance

-//

Please chack back sometime

-//
-//
- -//
-//
-// -// < LayoutTopLine size={54} /> -// -//

Why is the Down

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
-// -// -// -//

What is the Downtime?

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
-// -// -// -//

Do you need Support?

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
- -//
-// ) -// } - -// export default Maintenance diff --git a/components/Maintenance/Maintenance.tsx b/components/Maintenance/Maintenance.tsx new file mode 100644 index 0000000..a70e5e5 --- /dev/null +++ b/components/Maintenance/Maintenance.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { useRouter } from "next/router"; +import { + ExclamationCircle, + LayoutTopLine, + Clock, +} from "../modules/__modules/Vectors/index"; + +const Maintenance = () => { + const router = useRouter(); + + return ( +
+
+
+ logo +

+ We are Currently Performing Maintenance +

+

Please chack back sometime

+
+
+
+
+ + + +

Why is the Down

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+ + + +

What is the Downtime?

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+ + + +

Do you need Support?

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+
+ ); +}; + +export default Maintenance; diff --git a/components/Maintenance/index.jsx b/components/Maintenance/index.jsx deleted file mode 100644 index f4f631c..0000000 --- a/components/Maintenance/index.jsx +++ /dev/null @@ -1,52 +0,0 @@ -// import React from 'react' -// import { -// ExclamationCircle, -// LayoutTopLine, -// Clock -// } from '../modules/__modules/Vectors/index'; -// import MaintenanceImg from '../modules/static/images/MaintenanceGuy,png' -// const Index = () => { - -// return ( -//
-//
-//
-// logo -//

We are Currently Performing Maintenance

-//

Please chack back sometime

-//
-//
-//
-//
-// -// < LayoutTopLine size={54} /> -// -//

Why is the Down

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
-// -// -// -//

What is the Downtime?

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
-// -// -// -//

Do you need Support?

-//

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

-//
-//
-//
-//
-//
-// ) -// } - -// export default Index diff --git a/components/Maintenance/index.tsx b/components/Maintenance/index.tsx new file mode 100644 index 0000000..bc417df --- /dev/null +++ b/components/Maintenance/index.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { + ExclamationCircle, + LayoutTopLine, + Clock, +} from "../modules/__modules/Vectors/index"; +import MaintenanceImg from "../modules/static/images/MaintenanceGuy.png"; + +const Index = () => { + return ( +
+
+
+ logo +

+ We are Currently Performing Maintenance +

+

Please chack back sometime

+
+
+
+
+ + + +

Why is the Down

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+ + + +

What is the Downtime?

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+ + + +

Do you need Support?

+

+ It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. +

+
+
+
+
+
+ ); +}; + +export default Index; diff --git a/components/dummy_data/dailySalesData.js b/components/dummy_data/dailySalesData.js deleted file mode 100644 index ba20f5b..0000000 --- a/components/dummy_data/dailySalesData.js +++ /dev/null @@ -1,30 +0,0 @@ -// export const dailySalesData = [ -// { -// id:1, -// img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png", -// title:"sabali", -// artist:"Damian Marley", -// amount: 83 -// }, -// { -// id:2, -// img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png", -// title:"Holly Mountain", -// artist:"Bob Marley", -// amount: 83 -// }, -// { -// id:3, -// img:"https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png", -// title:"In My pocket", -// artist:"Duro lite", -// amount: 83 -// }, -// { -// id:4, -// img:"https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png", -// title:"Call away", -// artist:"Charlie puth", -// amount: 83 -// } -// ] diff --git a/components/dummy_data/dailySalesData.ts b/components/dummy_data/dailySalesData.ts new file mode 100644 index 0000000..0ffdf13 --- /dev/null +++ b/components/dummy_data/dailySalesData.ts @@ -0,0 +1,30 @@ +export const dailySalesData = [ + { + id: 1, + img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png", + title: "sabali", + artist: "Damian Marley", + amount: 83, + }, + { + id: 2, + img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png", + title: "Holly Mountain", + artist: "Bob Marley", + amount: 83, + }, + { + id: 3, + img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png", + title: "In My pocket", + artist: "Duro lite", + amount: 83, + }, + { + id: 4, + img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png", + title: "Call away", + artist: "Charlie puth", + amount: 83, + }, +]; diff --git a/components/modules/FeaturedAlbum/index.jsx b/components/modules/FeaturedAlbum/index.jsx deleted file mode 100644 index 0fb5885..0000000 --- a/components/modules/FeaturedAlbum/index.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// import React, { useState } from "react"; -// import FeaturedAlbumCard from "../__modules__/Card/FeaturedAlbumCard"; -// import Carousel from "../__modules__/Carousel"; -// import { topSongsData } from "../../dummy_data/topSongsData"; - -// const FeaturedAlbum = () => { -// const [data, _] = useState(topSongsData.slice(0, 6)); -// return ( -// -// {data.map((song) => { -// return ( -// <> -// -// -// ); -// })} -// -// ); -// }; - -// export default FeaturedAlbum; diff --git a/components/modules/FeaturedAlbum/index.tsx b/components/modules/FeaturedAlbum/index.tsx new file mode 100644 index 0000000..a777559 --- /dev/null +++ b/components/modules/FeaturedAlbum/index.tsx @@ -0,0 +1,25 @@ +import React, { useState } from "react"; +import FeaturedAlbumCard from "../__modules__/Card/FeaturedAlbumCard"; +import Carousel from "../__modules__/Carousel"; +import { topSongsData } from "../../dummy_data/topSongsData"; + +const FeaturedAlbum = () => { + const [data, _] = useState(topSongsData.slice(0, 6)); + return ( + + {data.map((song) => { + return ( + <> + + + ); + })} + + ); +}; + +export default FeaturedAlbum; diff --git a/components/modules/Singers/index.jsx b/components/modules/Singers/index.jsx deleted file mode 100644 index ea20675..0000000 --- a/components/modules/Singers/index.jsx +++ /dev/null @@ -1,96 +0,0 @@ -// import React from "react"; -// import { VPen, VTrash } from "../__modules/Vectors"; -// import Link from "next/link"; -// import PropTypes from "prop-types"; - -// const Singers = ({ isTopNav }) => { -// return ( -//
-//
-//

Singer Lists

-// -// -// -//
-//
-//
-// -// -//

entries

-//
-//
-// -// -//
-//
-//
-// -// -// -// -// -// -// -// -// -// {Array.from({ length: 10 }).map((_, index) => { -// return ( -// -// -// -// -// -// -// -// ); -// })} -// -//
NoProfileEmailSong DescriptionAction
{index + 1} -// {index} -// galiendcodes13@gmail.com -// Lorem ipsum dolor sit amet consectetur adipisicing elit. -// Laborum, quasi. -// -//
-// -// -//
-//
-//
-//
-// ); -// }; - -// Singers.propTypes = { -// isTopNav: PropTypes.bool.isRequired, -// }; - -// export default Singers; diff --git a/components/modules/Singers/index.tsx b/components/modules/Singers/index.tsx new file mode 100644 index 0000000..14bd4bc --- /dev/null +++ b/components/modules/Singers/index.tsx @@ -0,0 +1,95 @@ +import React, { FC } from "react"; +import { VPen, VTrash } from "../__modules/Vectors"; +import Link from "next/link"; + +interface SingersProps { + isTopNav: boolean; +} + +const Singers: FC = ({ isTopNav }) => { + return ( +
+
+

Singer Lists

+ + + +
+
+
+ + +

entries

+
+
+ + +
+
+
+ + + + + + + + + + {Array.from({ length: 10 }).map((_, index) => { + return ( + + + + + + + + ); + })} + +
NoProfileEmailSong DescriptionAction
{index + 1} + {`${index}_singer`} + galiendcodes13@gmail.com + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Laborum, quasi. + +
+ + +
+
+
+
+ ); +}; + +export default Singers; diff --git a/components/modules/__modules__/Card/FeaturedAlbumCard.jsx b/components/modules/__modules__/Card/FeaturedAlbumCard.jsx deleted file mode 100644 index cccfaf0..0000000 --- a/components/modules/__modules__/Card/FeaturedAlbumCard.jsx +++ /dev/null @@ -1,29 +0,0 @@ -// import React from "react"; -// import PropTypes from "prop-types"; - -// const FeaturedAlbumCard = ({ album }) => { -// return ( -//
-//
-//
-// {album.artist} -//
- -//
-//

{album.title}

-//

{album.artist}

-//
-//
-//
-// ); -// }; - -// FeaturedAlbumCard.propTypes = { -// album: PropTypes.object.isRequired, -// }; - -// export default FeaturedAlbumCard; diff --git a/components/modules/__modules__/Card/FeaturedAlbumCard.tsx b/components/modules/__modules__/Card/FeaturedAlbumCard.tsx new file mode 100644 index 0000000..71a299b --- /dev/null +++ b/components/modules/__modules__/Card/FeaturedAlbumCard.tsx @@ -0,0 +1,29 @@ +import React, { FC } from "react"; +import { ISong } from "../../../../types"; + +interface FeaturedAlbumCardProps { + album: ISong; +} + +const FeaturedAlbumCard: FC = ({ album }) => { + return ( +
+
+
+ {album.artist} +
+ +
+

{album.title}

+

{album.artist}

+
+
+
+ ); +}; + +export default FeaturedAlbumCard; diff --git a/components/modules/__modules__/Card/PageCard.tsx b/components/modules/__modules__/Card/PageCard.tsx index 8eb87cd..864eec6 100644 --- a/components/modules/__modules__/Card/PageCard.tsx +++ b/components/modules/__modules__/Card/PageCard.tsx @@ -1,4 +1,3 @@ - import React, { Dispatch, FC, SetStateAction } from "react"; import { useRecoilValue } from "recoil"; import { leftNavPinedAtom } from "../../../lib/atoms"; @@ -11,7 +10,6 @@ interface IProps { } const PageCard: FC = ({ children, setIsTopNav }) => { - const isLeftNavPined = useRecoilValue(leftNavPinedAtom); return ( <> @@ -19,7 +17,6 @@ const PageCard: FC = ({ children, setIsTopNav }) => { className={`relative flex flex-col ${ !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72" } mobile:ml-5`} - > {children} diff --git a/tsconfig.json b/tsconfig.json index ec72e7c..421d2ae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,14 @@ "jsx": "preserve", "incremental": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/modules/__modules__/_Vectors/wavePlayVector.jsx", "components/modules/AddNewSinger/index.tsx"], + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "components/modules/__modules__/_Vectors/wavePlayVector.jsx", + "components/modules/AddNewSinger/index.tsx", + "components/modules/utils/config/audioPlayer.jsx", + "components/modules/utils/config/audioControls.jsx" + ], "exclude": ["node_modules"] }