From aa4cc2c55350ff847162be28c59a9b4a8265fb29 Mon Sep 17 00:00:00 2001 From: Jonath-z Date: Mon, 27 Jun 2022 12:18:50 +0200 Subject: [PATCH] music stat component added to dashbord --- components/AdminDashboardPage/index.jsx | 14 ++++++ .../_modules/Cards/MusicStatisticCard.jsx | 45 +++++++++++++++++ components/modules/AdminDashboard/index.jsx | 48 +++++++++++++++++++ components/modules/__modules/Vectors/index.js | 24 ++++++++-- .../modules/utils/helpers/numberConverter.js | 16 +++++++ pages/admin/dashboard.js | 12 +++++ tailwind.config.js | 4 +- 7 files changed, 156 insertions(+), 7 deletions(-) create mode 100644 components/AdminDashboardPage/index.jsx create mode 100644 components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx create mode 100644 components/modules/AdminDashboard/index.jsx create mode 100644 components/modules/utils/helpers/numberConverter.js create mode 100644 pages/admin/dashboard.js diff --git a/components/AdminDashboardPage/index.jsx b/components/AdminDashboardPage/index.jsx new file mode 100644 index 0000000..df09778 --- /dev/null +++ b/components/AdminDashboardPage/index.jsx @@ -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/Cards/MusicStatisticCard.jsx b/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx new file mode 100644 index 0000000..e285d2e --- /dev/null +++ b/components/modules/AdminDashboard/_modules/Cards/MusicStatisticCard.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import { VInfo, VStatsChart } from "../../../__modules/Vectors"; +import PropsTypes from "prop-types"; + +const MusicStatisticCard = ({ + statTitle, + statValue, + statIcon, + iconColorClassName, + iconBgClassName, +}) => { + return ( +
+
+

{statTitle}

+

+ +

+
+
+

+ +

+
+

{statValue}

+

+ {statIcon} +

+
+
+
+ ); +}; + +MusicStatisticCard.propTypes = { + statTitle: PropsTypes.string.isRequired, + statValue: PropsTypes.string.isRequired, + statIcon: PropsTypes.element.isRequired, + iconColorClassName: PropsTypes.string.isRequired, + iconBgClassName: PropsTypes.string.isRequired, +}; + +export default MusicStatisticCard; diff --git a/components/modules/AdminDashboard/index.jsx b/components/modules/AdminDashboard/index.jsx new file mode 100644 index 0000000..5cb2688 --- /dev/null +++ b/components/modules/AdminDashboard/index.jsx @@ -0,0 +1,48 @@ +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 PropsTypes from "prop-types"; + +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.propsTypes = { + isTopNav: PropsTypes.bool.isRequired, +}; + +export default AdminDashboard; diff --git a/components/modules/__modules/Vectors/index.js b/components/modules/__modules/Vectors/index.js index b0a90dc..2677cb7 100644 --- a/components/modules/__modules/Vectors/index.js +++ b/components/modules/__modules/Vectors/index.js @@ -12,12 +12,14 @@ import { AiOutlineHome as HomeIcon, AiOutlineMenu as MenuOutlineIcon, AiOutlinePlayCircle as PlayCircleIcon, - AiOutlineExclamationCircle as ExclamationCircle + AiOutlineExclamationCircle as ExclamationCircle, + AiOutlineTag as VTag, } from "react-icons/ai"; import { RiNotificationLine as NotificationIcon, RiMenu3Fill as MenuIcon, - RiLayoutTopLine as LayoutTopLine + RiLayoutTopLine as LayoutTopLine, + RiRefundLine as VRefund, } from "react-icons/ri"; import { IoCloseOutline as CloseIcon } from "react-icons/io5"; import { @@ -25,7 +27,7 @@ import { FiChevronDown as ChevronDowntIcon, FiFilePlus as FilePlusIcon, } from "react-icons/fi"; -import { GoHome as HomeSubMenuIcon ,GoClock as Clock} from "react-icons/go"; +import { GoHome as HomeSubMenuIcon, GoClock as Clock } from "react-icons/go"; import { BsHeadphones as HeadPhonesIcon, BsSun as SunIcon, @@ -33,16 +35,21 @@ import { BsPin as PinIcon, BsArrowLeft as ArrowLeftIcon, BsArrowRight as ArrowRightIcon, + BsCardImage as VImageCard, } from "react-icons/bs"; import { TbFileMusic as FileMusicIcon } from "react-icons/tb"; import { CgArrowsExpandUpRight as ArrowExpendUpRighIcon } from "react-icons/cg"; -import { IoDownloadOutline as DownLoadOutlineIcon } from "react-icons/io5"; +import { + IoDownloadOutline as DownLoadOutlineIcon, + IoStatsChartSharp as VStatsChart, +} from "react-icons/io5"; import { MdFavoriteBorder as FavoriteIcon } from "react-icons/md"; import { GiMicrophone as MicIcon } from "react-icons/gi"; import { RiAdminLine as AdminIcon, RiProfileLine as EditProfileIcon, RiAccountBoxLine as AccountIcon, + RiRadarLine as VRadar, } from "react-icons/ri"; import { ImProfile as ProfileSheetIcon } from "react-icons/im"; import { @@ -59,6 +66,7 @@ import { BsFillVolumeUpFill as VolumeUpIcon, BsFillVolumeMuteFill as VolumeDownIcon, } from "react-icons/bs"; +import { MdInfo as VInfo } from "react-icons/md"; export { SeachIcon, @@ -104,5 +112,11 @@ export { VTrash, ExclamationCircle, LayoutTopLine, - Clock + Clock, + VInfo, + VStatsChart, + VImageCard, + VTag, + VRadar, + VRefund, }; diff --git a/components/modules/utils/helpers/numberConverter.js b/components/modules/utils/helpers/numberConverter.js new file mode 100644 index 0000000..d1718e6 --- /dev/null +++ b/components/modules/utils/helpers/numberConverter.js @@ -0,0 +1,16 @@ +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/pages/admin/dashboard.js b/pages/admin/dashboard.js new file mode 100644 index 0000000..564e7f7 --- /dev/null +++ b/pages/admin/dashboard.js @@ -0,0 +1,12 @@ +import React from "react"; +import AdminDashboardPage from "../../components/AdminDashboardPage"; + +const dashboard = () => { + return ( +
+ +
+ ); +}; + +export default dashboard; diff --git a/tailwind.config.js b/tailwind.config.js index 94dd088..ba482e6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,8 +12,8 @@ module.exports = { }, extend: { screens: { - mobile: { max: "1000px" }, - mobilesm: { max: "500px" }, + mobile: { max: "1024px" }, + mobilesm: { max: "690px" }, mobilexs: { max: "320px" }, }, },