+
+ )
+}
\ No newline at end of file
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-Bold.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-Bold.ttf
new file mode 100644
index 000000000..14ecf9e7e
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-Bold.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraBold.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraBold.ttf
new file mode 100644
index 000000000..34d9cdd78
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraBold.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraLight.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraLight.ttf
new file mode 100644
index 000000000..4f83dfd6a
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-ExtraLight.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-Light.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-Light.ttf
new file mode 100644
index 000000000..4a6b3fa08
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-Light.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-Medium.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-Medium.ttf
new file mode 100644
index 000000000..02a1727ac
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-Medium.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-Regular.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-Regular.ttf
new file mode 100644
index 000000000..f033747b4
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-Regular.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-SemiBold.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-SemiBold.ttf
new file mode 100644
index 000000000..3eec77f20
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-SemiBold.ttf differ
diff --git a/src/dashboard/src/assets/fonts/Dosis/Dosis-VariableFont_wght.ttf b/src/dashboard/src/assets/fonts/Dosis/Dosis-VariableFont_wght.ttf
new file mode 100644
index 000000000..49fe00204
Binary files /dev/null and b/src/dashboard/src/assets/fonts/Dosis/Dosis-VariableFont_wght.ttf differ
diff --git a/src/dashboard/src/assets/img/lavamusic.png b/src/dashboard/src/assets/img/lavamusic.png
new file mode 100644
index 000000000..e891dc23a
Binary files /dev/null and b/src/dashboard/src/assets/img/lavamusic.png differ
diff --git a/src/dashboard/src/components/404.tsx b/src/dashboard/src/components/404.tsx
new file mode 100644
index 000000000..b2ba30b44
--- /dev/null
+++ b/src/dashboard/src/components/404.tsx
@@ -0,0 +1,18 @@
+
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+
+
+ Create best music {" "}
+
+
+
+
+ Create best music {" "}
+
+
+
+
+ Lavamusic is a Discord Music Bot with a lot of features like Spotify, YouTube, SoundCloud, Twitch, Listen.moe, Bandcamp, Vimeo, Direct Links, and more!
+
+
+
+
+
+
+
+
+ + Error404 +
+Sorry, we couldn't find this page.
+But dont worry, you can find plenty of other things on our homepage.
+ Back to homepage +
+
+
+
+
+ 
+
+
+
+
+
+
+
+ {config.menuList.map((item, idx) => {
+ return (
+
+ {/* user profile */}
+ {user && (
+
+
+ {item.text}
+
+
+ );
+ }
+ )}
+
+ 
+
+ )}
+
+ {user.username}
+
+
+
+
+
+ {isMobileMenuOpen ?
+
+ {config.menuList.map((item, idx) => {
+ const delay = idx * 0.1;
+ const itemStyle = {
+ animation: `${styles.slideIn} 0.3s ease ${delay}s both`
+ };
+ return (
+
+
+
+ {item.text}
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default Loader;
\ No newline at end of file
diff --git a/src/dashboard/src/components/MusicPlayer/Controls.tsx b/src/dashboard/src/components/MusicPlayer/Controls.tsx
new file mode 100644
index 000000000..12f09c03f
--- /dev/null
+++ b/src/dashboard/src/components/MusicPlayer/Controls.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { MdSkipNext, MdSkipPrevious } from "react-icons/md";
+import {
+ BsArrowRepeat,
+ BsFillPauseFill,
+ BsFillPlayFill,
+ BsShuffle,
+} from "react-icons/bs";
+
+
+type Props = {
+ isPlaying: boolean;
+ repeat: string;
+ setRepeat: any;
+ shuffle: boolean;
+ setShuffle: any;
+ currentSongs: any;
+ handlePlayPause: any;
+ handlePrevSong: any;
+ handleNextSong: any;
+}
+
+
+export default function PlayerControls({
+ isPlaying,
+ repeat,
+ setRepeat,
+ shuffle,
+ setShuffle,
+ currentSongs,
+ handlePlayPause,
+ handlePrevSong,
+ handleNextSong,
+}: Props) {
+
+
+
+}
+
+
+
+
+
diff --git a/src/dashboard/src/components/NotificationDialog.tsx b/src/dashboard/src/components/NotificationDialog.tsx
new file mode 100644
index 000000000..d688df956
--- /dev/null
+++ b/src/dashboard/src/components/NotificationDialog.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import {
+ Dialog,
+ DialogHeader,
+ DialogBody,
+ DialogFooter,
+ Typography,
+ Button,
+} from "@material-tailwind/react";
+
+export function NotificationDialog({ customMessage, isSuccess }: Props) {
+ const [open, setOpen] = useState(false);
+
+ useEffect(() => {
+ if (customMessage) {
+ setOpen(true);
+ }
+ }, [customMessage]);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const dialogStyle = isSuccess
+ ? {
+ backgroundColor: "#4CAF50",
+ }
+ : {
+ backgroundColor: "#F44336",
+ };
+ const successIcon = isSuccess ? (
+
+ ) : (
+
+ );
+
+ return (
+
+ );
+}
+
+type Props = {
+ customMessage?: string;
+ isSuccess?: boolean;
+};
diff --git a/src/dashboard/src/components/SquigglyLines.tsx b/src/dashboard/src/components/SquigglyLines.tsx
new file mode 100644
index 000000000..5972f9077
--- /dev/null
+++ b/src/dashboard/src/components/SquigglyLines.tsx
@@ -0,0 +1,12 @@
+export default function SquigglyLines() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/dashboard/src/config/config.ts b/src/dashboard/src/config/config.ts
new file mode 100644
index 000000000..ac4c0ab05
--- /dev/null
+++ b/src/dashboard/src/config/config.ts
@@ -0,0 +1,16 @@
+/* eslint-disable import/no-anonymous-default-export */
+
+export default {
+ api: {
+ base: "http://localhost:3001/api",
+ },
+ menuList: [
+ { text: "Home", href: "/" },
+ { text: "About Us", href: "/about" },
+ { text: "Contact", href: "/contact" },
+ ],
+ logo: "https://media.discordapp.net/attachments/876035356460462090/887728792926290091/20210820_124325.png",
+ links: {
+ invite: "https://discord.com/api/oauth2/authorize?client_id=876035356460462090&permissions=8&scope=bot%20applications.commands",
+ }
+}
\ No newline at end of file
diff --git a/src/dashboard/src/contexts/ClientContext.ts b/src/dashboard/src/contexts/ClientContext.ts
new file mode 100644
index 000000000..8fb942c73
--- /dev/null
+++ b/src/dashboard/src/contexts/ClientContext.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { createContext, useContext } from 'react';
+
+const ClientContext = createContext(false);
+
+export const useClient = () => {
+ const isClient = useContext(ClientContext);
+ return isClient;
+};
+
+export default ClientContext;
\ No newline at end of file
diff --git a/src/dashboard/src/layouts/ServerSlide.tsx b/src/dashboard/src/layouts/ServerSlide.tsx
new file mode 100644
index 000000000..eed8f4f01
--- /dev/null
+++ b/src/dashboard/src/layouts/ServerSlide.tsx
@@ -0,0 +1,71 @@
+
+"use client";
+
+import style from '@/styles/server.module.scss';
+import React from "react";
+import {
+ Card,
+ Typography,
+ List,
+ ListItem,
+ ListItemPrefix,
+ ListItemSuffix,
+ Chip,
+ Accordion,
+ AccordionHeader,
+ AccordionBody,
+ Alert,
+ Button,
+ CardBody,
+ CardFooter,
+ CardHeader,
+} from "@material-tailwind/react";
+import { MdSpaceDashboard } from "react-icons/md";
+import { Guild } from "@/types/types";
+import { RiSettings4Fill } from "react-icons/ri";
+import { SiApplemusic } from "react-icons/si";
+import { useRouter } from 'next/router';
+
+
+export function ServerSlide({ guild }: { guild: Guild }) {
+ const router = useRouter();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/dashboard/src/pages/api/auth/login.tsx b/src/dashboard/src/pages/api/auth/login.tsx
new file mode 100644
index 000000000..abcf0dd96
--- /dev/null
+++ b/src/dashboard/src/pages/api/auth/login.tsx
@@ -0,0 +1,6 @@
+import config from '@/config/config';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+ res.redirect(`${config.api.base}/auth/login`);
+}
\ No newline at end of file
diff --git a/src/dashboard/src/pages/api/auth/redirect.tsx b/src/dashboard/src/pages/api/auth/redirect.tsx
new file mode 100644
index 000000000..56fd136ee
--- /dev/null
+++ b/src/dashboard/src/pages/api/auth/redirect.tsx
@@ -0,0 +1,5 @@
+// redirect.ts is a helper function that redirects the user to the login page if they are not logged in
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+}
\ No newline at end of file
diff --git a/src/dashboard/src/pages/dashboard.tsx b/src/dashboard/src/pages/dashboard.tsx
new file mode 100644
index 000000000..0843ab3f6
--- /dev/null
+++ b/src/dashboard/src/pages/dashboard.tsx
@@ -0,0 +1,82 @@
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable @next/next/no-img-element */
+import { Suspense, useEffect, useState } from 'react';
+import { fetchMutualGuilds } from '@/api/api';
+import { Guilds } from '@/types/types';
+import style from '@/styles/dashboard.module.scss';
+import Loader from '@/components/Loader';
+import type { GetServerSidePropsContext } from 'next';
+import Header from '@/components/Header';
+import '@/styles/globals.scss';
+import { useRouter } from 'next/router';
+import React from 'react';
+import Footer from '@/components/Footer';
+
+
+type Props = {
+ guilds: Guilds[];
+}
+
+function GuildList({ guilds }: { guilds: Guilds[] }) {
+ const router = useRouter();
+
+ const renderGuildCard = (g: Guilds) => (
+
+ 
+
+
+
+ {guild.name}
+
+ -
+
+ 
+
+ );
+
+ return (
+
+ {g.name}
+
+
+ {guilds.map((g, index) => (
+
+ {index > 0 && index % 5 === 0 && (
+
+ )}
+ {renderGuildCard(g)}
+
+ ))}
+
+ );
+}
+
+export default function Dashboard({ guilds }: Props) {
+ const [isLoading, setIsLoading] = useState(true);
+ useEffect(() => {
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 2000);
+ }, []);
+ if (isLoading) {
+ return
+
+ );
+}
+
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ return await fetchMutualGuilds(context);
+}
\ No newline at end of file
diff --git a/src/dashboard/src/pages/server/[id]/index.tsx b/src/dashboard/src/pages/server/[id]/index.tsx
new file mode 100644
index 000000000..5964406aa
--- /dev/null
+++ b/src/dashboard/src/pages/server/[id]/index.tsx
@@ -0,0 +1,30 @@
+import Loader from "@/components/Loader";
+import { GetServerSidePropsContext } from "next/types";
+import { Suspense, useEffect, useState } from "react";
+import '@/styles/globals.scss';
+import '@/styles/server.module.scss';
+import { Guild } from "@/types/types";
+import { getGuild } from "@/api/api";
+import { ServerSlide } from "@/layouts/ServerSlide";
+
+
+type Props = {
+ guild: Guild;
+}
+
+
+export default function Server({ guild }: Props) {
+
+ return (
+
+
+
+
+
+
+
+ Select a server to manage
+
+
+
+
+ );
+}
+
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ return await getGuild(context);
+}
diff --git a/src/dashboard/src/pages/server/[id]/music.tsx b/src/dashboard/src/pages/server/[id]/music.tsx
new file mode 100644
index 000000000..5fea84693
--- /dev/null
+++ b/src/dashboard/src/pages/server/[id]/music.tsx
@@ -0,0 +1,51 @@
+import config from "@/config/config";
+import { GetServerSidePropsContext } from "next/types";
+import { Suspense, useState } from "react";
+import '@/styles/globals.scss';
+import '@/styles/server.module.scss';
+import { Guild } from "@/types/types";
+import { getGuild } from "@/api/api";
+import { ServerSlide } from "@/layouts/ServerSlide";
+import { Input, Button } from "@material-tailwind/react";
+
+
+type Props = {
+ guild: Guild;
+}
+
+export default function Music({ guild }: Props) {
+ const music = {
+ title: "Sorry Sorry - Justin Bieber",
+ artist: "Justin Bieber",
+ duration: "3:41",
+ thumbnail: "https://i.ytimg.com/vi/fRh_vgS2dFE/maxresdefault.jpg",
+ url: "https://www.youtube.com/watch?v=fRh_vgS2dFE",
+ isPlaying: true,
+ }
+
+ return (
+
+
+
+
+ );
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ return await getGuild(context);
+}
diff --git a/src/dashboard/src/pages/server/[id]/setting.tsx b/src/dashboard/src/pages/server/[id]/setting.tsx
new file mode 100644
index 000000000..f58621f44
--- /dev/null
+++ b/src/dashboard/src/pages/server/[id]/setting.tsx
@@ -0,0 +1,82 @@
+import config from "@/config/config";
+import { GetServerSidePropsContext } from "next/types";
+import { Suspense, useState } from "react";
+import '@/styles/globals.scss';
+import '@/styles/server.module.scss';
+import { Guild } from "@/types/types";
+import { getGuild } from "@/api/api";
+import { ServerSlide } from "@/layouts/ServerSlide";
+import { Input, Button } from "@material-tailwind/react";
+import { NotificationDialog } from "@/components/NotificationDialog";
+import axios from "axios";
+
+type Props = {
+ guild: Guild;
+}
+
+export default function Setting({ guild }: Props) {
+ const [newPrefix, setNewPrefix] = useState("");
+ const [notificationMessage, setNotificationMessage] = useState("");
+ const [isSuccess, setIsSuccess] = useState(false);
+ const handlePrefixChange = async () => {
+ const isEmpty = /^\s*$/.test(newPrefix);
+ const isTooLong = newPrefix.length > 5;
+ const containsInvalidChars = /[\s@#]/.test(newPrefix);
+ if (isEmpty) {
+ setNotificationMessage('Prefix cannot be empty');
+ setIsSuccess(false);
+ } else if (isTooLong) {
+ setNotificationMessage('Prefix cannot be longer than 5 characters');
+ setIsSuccess(false);
+ } else if (containsInvalidChars) {
+ setNotificationMessage('Prefix cannot contain spaces, @, or #');
+ setIsSuccess(false);
+ } else {
+ try {
+ await axios.put(`${config.api.base}/guild/${guild.id}/prefix`, { prefix: newPrefix }, { withCredentials: true });
+ setNotificationMessage('Prefix changed successfully');
+ setIsSuccess(true);
+ } catch (err) {
+ console.error(err);
+ }
+ }
+ }
+
+ return (
+
+
+
+ {/* music Player like spotify */}
+
+
+
+ Music Player
+
+ 
+
+ {music.title}
+ {music.artist}
+ {music.duration}
+
+
+
+
+ );
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ return await getGuild(context);
+}
diff --git a/src/dashboard/src/styles/dashboard.module.scss b/src/dashboard/src/styles/dashboard.module.scss
new file mode 100644
index 000000000..ef5a3b4c4
--- /dev/null
+++ b/src/dashboard/src/styles/dashboard.module.scss
@@ -0,0 +1,30 @@
+@font-face {
+ font-family: Dosis-Bold;
+ src: url('../assets/fonts/Dosis/Dosis-Bold.ttf');
+}
+
+@font-face {
+ font-family: Dosis-Regular;
+ src: url('../assets/fonts/Dosis/Dosis-Regular.ttf');
+}
+
+.dashboard {
+ height: 100%;
+ margin: 0 auto;
+}
+
+.mainContent {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 9rem;
+}
+
+.mainContentTitle {
+ font-family: Dosis-Bold;
+ font-size: 4.5rem;
+ margin-bottom: 2.5rem;
+ border-bottom: 2px solid #9459F0;
+}
+
diff --git a/src/dashboard/src/styles/footer.module.scss b/src/dashboard/src/styles/footer.module.scss
new file mode 100644
index 000000000..07534b08d
--- /dev/null
+++ b/src/dashboard/src/styles/footer.module.scss
@@ -0,0 +1,50 @@
+
+
+.footer {
+ color: #fff;
+ padding: 20px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ width: 100%;
+ bottom: 0;
+ position: fixed;
+ margin: 0 auto;
+ a {
+ color: #fff;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .footer {
+ font-size: 12px;
+ }
+ .footer a {
+ font-size: 12px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .footer {
+ font-size: 10px;
+ }
+ .footer a {
+ font-size: 10px;
+ }
+}
diff --git a/src/dashboard/src/styles/globals.scss b/src/dashboard/src/styles/globals.scss
new file mode 100644
index 000000000..1117315c4
--- /dev/null
+++ b/src/dashboard/src/styles/globals.scss
@@ -0,0 +1,102 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+ font-family: DM Sans;
+ src: url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900;1,9..40,1000&display=swap')
+}
+
+:root {
+ --background: #111827;
+ --text: #FFF;
+ --highlight: #39AC4C;
+}
+
+@layer base {
+ html {
+ font-family: Proxima Nova, system-ui, sans-serif;
+ }
+}
+
+html {
+ height: 100%;
+ width: 100%;
+ padding: 0%;
+ margin: 0%;
+ height: 100%;
+ color: var(--text);
+ background-color: var(--background);
+}
+
+body {
+ height: 100%;
+ width: 100%;
+ padding: 0%;
+ margin: 0%;
+ height: 100%;
+ color: var(--text);
+ background-color: var(--background);
+}
+
+.container {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+}
+
+.home-page {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 10rem;
+}
+
+@keyframes slideIn {
+ 0% {
+ transform: translateX(-100%);
+ }
+
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+@keyframes slideUp {
+ 0% {
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@keyframes downToUp {
+ 0% {
+ transform: translateY(100%);
+ }
+
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@media (min-width: 400px) {
+ .background-gradient::before {
+ background: radial-gradient(20% 50% at 50% 50%,
+ rgba(217, 60, 248, 0.233) 0%,
+ rgba(68, 40, 68, 0) 100%);
+ z-index: -10;
+ content: "";
+ position: absolute;
+ inset: 0px;
+ transform: scale(1);
+ pointer-events: none;
+ }
+}
\ No newline at end of file
diff --git a/src/dashboard/src/styles/home.module.scss b/src/dashboard/src/styles/home.module.scss
new file mode 100644
index 000000000..c88a0eeda
--- /dev/null
+++ b/src/dashboard/src/styles/home.module.scss
@@ -0,0 +1,230 @@
+@font-face {
+ font-family: Dosis-Bold;
+ src: url('../assets/fonts/Dosis/Dosis-Bold.ttf');
+}
+
+@font-face {
+ font-family: Dosis-Regular;
+ src: url('../assets/fonts/Dosis/Dosis-Regular.ttf');
+}
+
+.title {
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ animation: downToUp 1s ease-in-out;
+ margin-top: 9rem;
+ margin-bottom: 2.5rem;
+}
+
+.title h1 {
+ font-family: Dosis-Bold;
+}
+
+
+.description {
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ animation: downToUp 1s ease-in-out;
+ margin-bottom: 5rem;
+}
+.description p {
+ font-family: Dosis-Regular;
+}
+
+
+.description p :hover {
+ color: #9459F0;
+}
+
+.features {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ margin: auto;
+ margin-top: 10rem;
+ margin-bottom: 2rem;
+ animation: downToUp 1s ease-in-out;
+}
+
+/* icon */
+.icon {
+ color: white;
+ width: 25px;
+ height: 25px;
+}
+
+/* home page button */
+
+.button {
+ display: flex;
+ gap: 10px;
+ width: 280px;
+ position: relative;
+ padding: 1em 1.8em;
+ justify-content: center;
+ letter-spacing: 1px;
+ font-size: 15px;
+ text-decoration: none;
+ overflow: hidden;
+ border-radius: 10px;
+ cursor: pointer;
+ font-weight: bold;
+ animation: downToUp 1s ease-in-out;
+}
+
+.buttonContainer {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ align-items: center;
+ margin: auto;
+ margin-top: 2rem;
+ flex-direction: row;
+
+}
+
+/* tablet */
+@media screen and (max-width: 768px) {
+ .title {
+ font-size: 2rem;
+ }
+
+ .description {
+ font-size: 1rem;
+ }
+
+ .icon {
+ width: 20px;
+ height: 20px;
+ }
+
+ .buttonContainer {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ align-items: center;
+ margin: auto;
+ margin-top: 2rem;
+ flex-direction: column;
+ }
+
+ .button {
+ width: 200px;
+ display: flex;
+ flex-direction: column;
+ font-size: 13px;
+ }
+}
+
+/* mobile */
+@media screen and (max-width: 480px) {
+ .title {
+ font-size: 1.5rem;
+ }
+
+ .description {
+ font-size: 0.8rem;
+ }
+
+ .icon {
+ width: 15px;
+ height: 15px;
+ }
+
+ .buttonContainer {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ align-items: center;
+ margin: auto;
+ margin-top: 2rem;
+ flex-direction: column;
+ }
+
+ .button {
+ width: 150px;
+ display: flex;
+ flex-direction: column;
+ padding: 0.4rem 0.4rem;
+ font-size: 10px;
+ }
+}
+
+@keyframes slideIn {
+ 0% {
+ transform: translateX(-100%);
+ }
+
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+@keyframes slideUp {
+ 0% {
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@keyframes downToUp {
+ 0% {
+ transform: translateY(100%);
+ }
+
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+@keyframes colorChange {
+ 0% {
+ color: #ff0000;
+ }
+
+ 10% {
+ color: #ffc400;
+ }
+
+ 20% {
+ color: #d9ff00;
+ }
+
+ 30% {
+ color: #00ff21;
+ }
+
+ 40% {
+ color: #00ffd5;
+ }
+
+ 50% {
+ color: #00f7ff;
+ }
+
+ 60% {
+ color: #0095ff;
+ }
+
+ 70% {
+ color: #002eff;
+ }
+
+ 80% {
+ color: #b700ff;
+ }
+
+ 90% {
+ color: #ff00bf;
+ }
+
+ 100% {
+ color: #ff006a;
+ }
+}
\ No newline at end of file
diff --git a/src/dashboard/src/styles/loader.module.scss b/src/dashboard/src/styles/loader.module.scss
new file mode 100644
index 000000000..fb4a2c404
--- /dev/null
+++ b/src/dashboard/src/styles/loader.module.scss
@@ -0,0 +1,75 @@
+.loader {
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ width: 300px;
+ height: 300px;
+ display: flex;
+ transform-style: preserve-3d;
+ transform: rotateX(-20deg);
+ margin: auto;
+ margin-top: 16rem;
+}
+
+.wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transform-style: preserve-3d;
+ animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+ 100% {
+ transform: rotateY(360deg);
+ }
+}
+
+.loader .wrapper .side {
+ width: 70px;
+ height: 70px;
+ /* you can choose any gradient or color you want */
+ /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ transform-origin: center top;
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+
+.loader .wrapper .side1 {
+ transform: rotateZ(-30deg) rotateY(90deg);
+ background: conic-gradient(#2BDEAC, #9459F0, #D8CCE6, #2F2585);
+}
+
+.loader .wrapper .side2 {
+ transform: rotateZ(30deg) rotateY(90deg);
+ background: conic-gradient(#2F2585, #D8CCE6, #9459F0, #2BDEAC);
+}
+
+.loader .wrapper .side3 {
+ transform: rotateX(30deg);
+ background: conic-gradient(#2F2585, #D8CCE6, #9459F0, #2BDEAC);
+}
+
+.loader .wrapper .side4 {
+ transform: rotateX(-30deg);
+ background: conic-gradient(#2BDEAC, #9459F0, #D8CCE6, #2F2585);
+}
+
+.loader .wrapper .shadow {
+ width: 60px;
+ height: 60px;
+ background: #8B5AD5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ transform: rotateX(90deg) translateZ(-40px);
+ filter: blur(12px);
+}
\ No newline at end of file
diff --git a/src/dashboard/src/styles/navbar.module.scss b/src/dashboard/src/styles/navbar.module.scss
new file mode 100644
index 000000000..8648bf8b2
--- /dev/null
+++ b/src/dashboard/src/styles/navbar.module.scss
@@ -0,0 +1,274 @@
+@font-face {
+ font-family: Dosis-Bold;
+ src: url('../assets/fonts/Dosis/Dosis-Bold.ttf');
+}
+
+@font-face {
+ font-family: Dosis-Regular;
+ src: url('../assets/fonts/Dosis/Dosis-Regular.ttf');
+}
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 1rem;
+ position: fixed;
+ height: 70px;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ z-index: 100;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ border: 1px solid rgba(0, 0, 0, 0.25);
+ animation: upToDown 0.5s ease both;
+}
+
+.headerContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ animation: upToDown 0.5s ease both;
+}
+
+.headerLogo {
+ width: 70px;
+ height: 70px;
+ object-fit: contain;
+ transition: 0.5s;
+ /* make a round logo */
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.headerLogo:hover {
+ cursor: pointer;
+}
+
+.headerMenu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 50%;
+ height: 100%;
+}
+
+.headerMenuList {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ list-style: none;
+ width: 100%;
+ height: 100%;
+}
+
+.headerMenuListItem {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.headerMenuListItem a {
+ position: relative;
+ text-decoration: none;
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 500;
+ font-family: Dosis-Regular;
+ transition: 0.5s;
+}
+
+.headerMenuListItem a:hover {
+ color: #9459F0
+}
+
+.headerMenuListItem a::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: #9459F0;
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.5s;
+}
+
+.headerMenuListItem a:hover::after {
+ transform: scaleX(1);
+}
+
+.headerMenuMobileButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.headerMenuMobileButtonIcon {
+ width: 30px;
+ height: 30px;
+ fill: white;
+ transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.headerMenuMobileList {
+ display: none;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+ list-style: none;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 70px;
+ right: -100%;
+ background-color: rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ z-index: 100;
+ overflow: hidden;
+ &.active {
+ display: flex;
+ right: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ justify-content: space-evenly;
+ flex-direction: column;
+ height: 30vh;
+ }
+}
+
+.headerMenuMobileListItem {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transform: translateY(-10px);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+
+ &.active {
+ opacity: 1;
+ transform: translateY(0);
+ animation: downToUp 0.5s ease both;
+ margin-bottom: 1rem;
+ height: 100%;
+
+ }
+}
+.headerMenuMobileListItem a {
+ position: relative;
+ text-decoration: none;
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 500;
+ font-family: Raleway;
+ transition: 0.5s;
+}
+.headerMenuMobileListItem a:hover {
+ color: #9459F0
+}
+.headerMenuMobileListItem a::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: #9459F0;
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.5s;
+}
+.headerMenuMobileListItem a:hover::after {
+ transform: scaleX(1);
+}
+@media screen and (max-width: 768px) {
+ .headerMenu {
+ display: none;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .headerMenuMobileButton {
+ display: none;
+ }
+
+ .headerMenuMobile {
+ display: none;
+ }
+}
+
+/* tablet */
+
+@media screen and (max-width: 768px) {
+ .header {
+ height: 60px;
+ }
+
+ .headerLogo {
+ width: 60px;
+ height: 60px;
+ }
+
+ .headerMenuMobileList {
+ top: 60px;
+ }
+}
+
+/* mobile */
+
+@media screen and (max-width: 480px) {
+ .header {
+ height: 50px;
+ }
+
+ .headerLogo {
+ width: 50px;
+ height: 50px;
+ }
+
+ .headerMenuMobileList {
+ top: 50px;
+ }
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ }
+
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes downToUp {
+ from {
+ transform: translateY(100%);
+ }
+
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes upToDown {
+ from {
+ transform: translateY(-100%);
+ }
+
+ to {
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/src/dashboard/src/styles/server.module.scss b/src/dashboard/src/styles/server.module.scss
new file mode 100644
index 000000000..1a0d8fb70
--- /dev/null
+++ b/src/dashboard/src/styles/server.module.scss
@@ -0,0 +1,42 @@
+@font-face {
+ font-family: Dosis-Bold;
+ src: url('../assets/fonts/Dosis/Dosis-Bold.ttf');
+}
+
+@font-face {
+ font-family: Dosis-Regular;
+ src: url('../assets/fonts/Dosis/Dosis-Regular.ttf');
+}
+
+
+.serverSlide {
+ width: 15rem;
+ height: 100%;
+ position: fixed;
+ background-color: rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ z-index: 1;
+ top: 0;
+ left: 0;
+ overflow-x: hidden;
+ padding-top: 2rem;
+ animation: slideBar 0.5s ease-in-out;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 1rem;
+ height: 1rem;
+}
+
+@keyframes slideBar {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
\ No newline at end of file
diff --git a/src/dashboard/src/styles/test.scss b/src/dashboard/src/styles/test.scss
new file mode 100644
index 000000000..31f419383
--- /dev/null
+++ b/src/dashboard/src/styles/test.scss
@@ -0,0 +1,58 @@
+.input {
+ display: flex;
+ flex-direction: column;
+ width: 200px;
+ background-color: #0D1117;
+ justify-content: center;
+ border-radius: 5px
+}
+
+.value {
+ background-color: transparent;
+ border: none;
+ padding: 10px;
+ color: white;
+ display: flex;
+ position: relative;
+ gap: 5px;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.value:not(:active):hover,
+.value:focus {
+ background-color: #21262C;
+}
+
+.value:focus,
+.value:active {
+ background-color: #1A1F24;
+ outline: none;
+}
+
+.value::before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: -10px;
+ width: 5px;
+ height: 80%;
+ background-color: #2F81F7;
+ border-radius: 5px;
+ opacity: 0;
+}
+
+.value:focus::before,
+.value:active::before {
+ opacity: 1;
+}
+
+.value svg {
+ width: 15px
+}
+
+.input:hover> :not(.value:hover) {
+ transition: 300ms;
+ filter: blur(1px);
+ transform: scale(0.95, 0.95);
+}
\ No newline at end of file
diff --git a/src/dashboard/src/types/types.ts b/src/dashboard/src/types/types.ts
new file mode 100644
index 000000000..c17c46c9b
--- /dev/null
+++ b/src/dashboard/src/types/types.ts
@@ -0,0 +1,111 @@
+
+export type Guilds = {
+ id: string;
+ name: string;
+ icon: string;
+ owner: boolean;
+ permissions: number;
+ features: string[];
+}
+
+export type User = {
+ id: string;
+ username: string;
+ discriminator: string;
+ avatar: string;
+ userId: string;
+ guilds: Guilds[];
+ accessToken: string;
+ refreshToken: string;
+}
+
+
+export type Guild = {
+ id: string;
+ name: string;
+ icon: string;
+ description: string;
+ home_header: string;
+ splash: string;
+ discovery_splash: string;
+ features: string[];
+ banner: string;
+ owner_id: string;
+ application_id: string;
+ region: string;
+ afk_channel_id: string;
+ afk_timeout: number;
+ system_channel_id: string;
+ system_channel_flags: number;
+ widget_enabled: boolean;
+ widget_channel_id: string;
+ verification_level: number;
+ roles: Role[];
+ default_message_notifications: number;
+ mfa_level: number;
+ explicit_content_filter: number;
+ max_presences: number;
+ max_members: number;
+ max_stage_video_channel_users: number;
+ max_video_channel_users: number;
+ vanity_url_code: string;
+ premium_tier: number;
+ premium_subscription_count: number;
+ preferred_locale: string;
+ rules_channel_id: string;
+ safety_alerts_channel_id: string;
+ public_updates_channel_id: string;
+ hub_type: string;
+ premium_progress_bar_enabled: boolean;
+ latest_onboarding_question_id: string;
+ nsfw: boolean;
+ nsfw_level: number;
+ emojis: Emoji[];
+ stickers: Sticker[];
+ banner_background_color: string;
+ banner_background_id: string;
+ incidents_data: string;
+ inventory_settings: string;
+ embed_enabled: boolean;
+ embed_channel_id: string;
+ application_command_count: number;
+ approximate_member_count: number;
+ approximate_presence_count: number;
+}
+
+export type Role = {
+ id: string;
+ name: string;
+ description: string;
+ permissions: string;
+ position: number;
+ color: number;
+ hoist: boolean;
+ managed: boolean;
+ mentionable: boolean;
+ icon: string;
+ unicode_emoji: string;
+ flags: number;
+}
+
+export type Emoji = {
+ id: string;
+ name: string;
+ roles: string[];
+ require_colons: boolean;
+ managed: boolean;
+ animated: boolean;
+ available: boolean;
+}
+
+export type Sticker = {
+ id: string;
+ name: string;
+ tags: string;
+ type: number;
+ format_type: number;
+ description: string;
+ asset: string;
+ available: boolean;
+ guild_id: string;
+}
diff --git a/src/dashboard/tailwind.config.ts b/src/dashboard/tailwind.config.ts
new file mode 100644
index 000000000..6a0a4d6b6
--- /dev/null
+++ b/src/dashboard/tailwind.config.ts
@@ -0,0 +1,72 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+ content: [
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+ 'gradient-conic':
+ 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ },
+ fontFamily: {
+ 'sans': ['ui-sans-serif', 'system-ui'],
+ 'serif': ['ui-serif', 'Georgia'],
+ 'mono': ['ui-monospace', 'SFMono-Regular'],
+ 'display': ['Oswald'],
+ 'body': ['"Open Sans"'],
+ },
+ colors: {
+ transparent: 'transparent',
+ current: 'currentColor',
+ 'white': '#ffffff',
+ 'discord': {
+ 100: '#5865f21a',
+ 200: '#5865f233',
+ 300: '#5865f24d',
+ 400: '#5865f266',
+ 500: '#5865f280',
+ 600: '#5865f299',
+ 700: '#5865f2b3',
+ 800: '#5865f2cc',
+ 900: '#5865f2e6',
+ },
+ 'gbut': {
+ 100: '#00ff001a',
+ 200: '#00ff0033',
+ 300: '#00ff004d',
+ 400: '#00ff0066',
+ 500: '#00ff0080',
+ 600: '#00ff0099',
+ 700: '#00ff00b3',
+ 800: '#00ff00cc',
+ 900: '#00ff00e6',
+ }
+ },
+ },
+ },
+ plugins: [
+ require("@tailwindcss/forms"),
+ require("@headlessui/tailwindcss"),
+ ],
+}
+export default config
+
+
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+module.exports = withMT({
+ content: [
+ "./src/pages/**/*.{js,ts,jsx,tsx}",
+ "./src/components/**/*.{js,ts,jsx,tsx}",
+ "./src/app/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+});
diff --git a/src/dashboard/tsconfig.json b/src/dashboard/tsconfig.json
new file mode 100644
index 000000000..e59724b28
--- /dev/null
+++ b/src/dashboard/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/src/index.ts b/src/index.ts
index c353737f7..9e32c3bce 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ import { ShardingManager } from "discord.js";
import Logger from "./structures/Logger";
import * as fs from 'fs';
+
const logger = new Logger();
if (!fs.existsSync("./src/utils/LavaLogo.txt")) {
@@ -35,6 +36,7 @@ manager.on("shardCreate", (shard) => {
});
});
+
/**
* Project: lavamusic
* Author: Blacky
diff --git a/tsconfig.json b/tsconfig.json
index 493f57574..d09a750e2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,9 @@
"target": "es2021",
"module": "CommonJS",
"lib": [
- "es2021"
+ "dom",
+ "dom.iterable",
+ "esnext"
],
"declaration": true,
"sourceMap": true,
@@ -18,4 +20,9 @@
"importHelpers": true,
"forceConsistentCasingInFileNames": true,
},
+ "exclude": [
+ "node_modules",
+ "dist",
+ "src/dashboard"
+ ]
}
\ No newline at end of file
+
+
+
+
+
+