diff --git a/mirror-2/app/discover/page.tsx b/mirror-2/app/discover/page.tsx index c59713fb..a38912a4 100644 --- a/mirror-2/app/discover/page.tsx +++ b/mirror-2/app/discover/page.tsx @@ -1,70 +1,74 @@ -import React from "react"; -import { listenNowAlbums, madeForYouAlbums } from "../home/data/albums"; -import { Card, CardContent, CardFooter } from "@/components/ui/card"; -import Image from "next/image"; -import { Sidebar } from "../home/components/sidebar"; -import { playlists } from "../home/data/playlists"; -import { Separator } from "@/components/ui/separator"; -import { Metadata } from "next"; +import React from 'react' +import { listenNowAlbums, madeForYouAlbums } from '../home/data/albums' +import { Card, CardContent, CardFooter } from '@/components/ui/card' +import Image from 'next/image' +import { Sidebar } from '../home/components/sidebar' +import { playlists } from '../home/data/playlists' +import { Separator } from '@/components/ui/separator' +import { Metadata } from 'next' +import Header from '@/components/ui/header' export const metadata: Metadata = { - title: "Discover", - description: "", -}; + title: 'Discover', + description: '' +} const Discover = () => { return ( -
- -
-
-

Discover

-
- - {listenNowAlbums.length ? ( -
- {listenNowAlbums?.map((album) => ( - - - {album?.name} - - -
-

{album.name}

-

- {album.artist} -

-
- - - ))} + <> +
+
+ +
+
+

Discover

- ) : ( -

No Item found

- )} + + {listenNowAlbums.length ? ( +
+ {listenNowAlbums?.map((album) => ( + + + {album?.name} + + +
+

{album.name}

+

+ {album.artist} +

+
+ + + ))} +
+ ) : ( +

No Item found

+ )} +
-
- ); -}; + + ) +} -export default Discover; +export default Discover diff --git a/mirror-2/app/home/components/sidebar.tsx b/mirror-2/app/home/components/sidebar.tsx index 9b50c30b..376f32e9 100644 --- a/mirror-2/app/home/components/sidebar.tsx +++ b/mirror-2/app/home/components/sidebar.tsx @@ -1,92 +1,15 @@ 'use client' import { cn } from '@/lib/utils' -import { useEffect, useState } from 'react' - import { Playlist } from '../data/playlists' import { Button } from '@/components/ui/button' import Link from 'next/link' -import { Axis3D, Gamepad2, PlusCircleIcon } from 'lucide-react' -import { - Dialog, - DialogContent, - DialogOverlay, - DialogPortal, - DialogTrigger -} from '@/components/ui/dialog' -import './sidebar.css' +import { Axis3D, Gamepad2 } from 'lucide-react' interface SidebarProps extends React.HTMLAttributes { playlists: Playlist[] } -const SidebarMenuForSmallScreen = () => { - return ( - <> -
- - - - - {process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && ( - - )} - {/* */} -
- - ) -} - export function Sidebar({ className, style }: SidebarProps) { - const [windowWidth, setWindowWidth] = useState(window.innerWidth) - const [showSmallSideBar, setShowSmallSidebar] = useState(false) - - const handleResize = () => setWindowWidth(window.innerWidth) - - useEffect(() => { - window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) - }, []) - - useEffect(() => { - if (windowWidth > 1024) { - setShowSmallSidebar(false) - } - }, [windowWidth]) - return ( <>
)} - {/* */}
- {/* =========Sidebar button for smaller screens less than 1024px======= */} -
- - setShowSmallSidebar(true)} - className="p-2" - > - {' '} - - - - - - - - - -
) } diff --git a/mirror-2/app/home/page.tsx b/mirror-2/app/home/page.tsx index 55662d60..b7b52d6c 100644 --- a/mirror-2/app/home/page.tsx +++ b/mirror-2/app/home/page.tsx @@ -8,6 +8,7 @@ import { appDescription, appName } from '@/lib/theme-service' import AccountDropdownMenu from '@/components/ui/account-dropdown-menu' import { Card, CardContent, CardFooter } from '@/components/ui/card' import { useGetSpacesByUserIdQuery } from '@/state/api/spaces' +import Header from '@/components/ui/header' const dummyImg = 'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80' @@ -17,22 +18,7 @@ export default function Home() { return ( <> -
- Music - Music -
+
-
diff --git a/mirror-2/app/my/account/page.tsx b/mirror-2/app/my/account/page.tsx index e0408881..d18b20bc 100644 --- a/mirror-2/app/my/account/page.tsx +++ b/mirror-2/app/my/account/page.tsx @@ -1,93 +1,97 @@ -import React from "react"; -import { Separator } from "@/components/ui/separator"; -import { Sidebar } from "@/app/home/components/sidebar"; -import { playlists } from "@/app/home/data/playlists"; -import EditButton from "./components/editButton"; -import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import ResetPassword from "@/app/protected/reset-password/page"; -import ResetEmail from "@/app/protected/reset-email/page"; -import "./page.css"; +import React from 'react' +import { Separator } from '@/components/ui/separator' +import { Sidebar } from '@/app/home/components/sidebar' +import { playlists } from '@/app/home/data/playlists' +import EditButton from './components/editButton' +import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import ResetPassword from '@/app/protected/reset-password/page' +import ResetEmail from '@/app/protected/reset-email/page' +import './page.css' +import Header from '@/components/ui/header' const MyAccount = () => { return ( -
- -
-
-

- Account Settings -

-
- -
-
-
- - + <> +
+
+ +
+
+

+ Account Settings +

+
+ +
+
+
+ + +
+ + + + + + + +
- - - - - - - - -
-
-
-
- - +
+
+
+ + +
+ + + + + + + +
- - - - - - - -
-
- ); -}; + + ) +} -export default MyAccount; +export default MyAccount diff --git a/mirror-2/app/my/assets/page.tsx b/mirror-2/app/my/assets/page.tsx index b255fbc5..81f4b40f 100644 --- a/mirror-2/app/my/assets/page.tsx +++ b/mirror-2/app/my/assets/page.tsx @@ -1,73 +1,78 @@ -import React from "react"; -import { madeForYouAlbums } from "../../home/data/albums"; -import { Card, CardContent, CardFooter } from "@/components/ui/card"; -import Image from "next/image"; -import { Sidebar } from "../../home/components/sidebar"; -import { playlists } from "../../home/data/playlists"; -import { Separator } from "@/components/ui/separator"; -import { PlusCircleIcon } from "lucide-react"; -import { Metadata } from "next"; +import React from 'react' +import { madeForYouAlbums } from '../../home/data/albums' +import { Card, CardContent, CardFooter } from '@/components/ui/card' +import Image from 'next/image' +import { Sidebar } from '../../home/components/sidebar' +import { playlists } from '../../home/data/playlists' +import { Separator } from '@/components/ui/separator' +import { Metadata } from 'next' +import Header from '@/components/ui/header' export const metadata: Metadata = { - title: "My Assets", - description: "", -}; + title: 'My Assets', + description: '' +} const MyAssets = () => { return ( -
- -
-
-
-

My Assets

+ <> +
+
+ +
+
+
+

+ My Assets +

+
+ + {madeForYouAlbums.length ? ( +
+ {madeForYouAlbums?.map((album) => ( + + + {album?.name} + + +
+

{album.name}

+

+ {album.artist} +

+
+ + + ))} +
+ ) : ( +

No Asset found

+ )}
- - {madeForYouAlbums.length ? ( -
- {madeForYouAlbums?.map((album) => ( - - - {album?.name} - - -
-

{album.name}

-

- {album.artist} -

-
- - - ))} -
- ) : ( -

No Asset found

- )}
-
- ); -}; + + ) +} -export default MyAssets; +export default MyAssets diff --git a/mirror-2/app/my/spaces/page.tsx b/mirror-2/app/my/spaces/page.tsx index 0d97fdb0..a82bf2a8 100644 --- a/mirror-2/app/my/spaces/page.tsx +++ b/mirror-2/app/my/spaces/page.tsx @@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button' import { PlusCircleIcon } from 'lucide-react' import { useGetSpacesByUserIdQuery } from '@/state/api/spaces' import { useRedirectToLoginIfNotSignedIn } from '@/hooks/auth' +import Header from '@/components/ui/header' const dummyImg = 'https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80' @@ -19,67 +20,74 @@ const MySpaces = () => { const { data: spaces, error } = useGetSpacesByUserIdQuery('') return ( -
- -
-
-
-

My Spaces

-
-
- + <> +
+
+ +
+
+
+

+ My Spaces +

+
+
+ +
+ + {spaces?.length ? ( +
+ {spaces?.map((space) => ( + + + {space?.name} + + +
+

+ {space?.name} +

+

+ Created At {space?.created_at.split('T')[0]} +

+
+ + + ))} +
+ ) : ( +

No Space found

+ )}
- - {spaces?.length ? ( -
- {spaces?.map((space) => ( - - - {space?.name} - - -
-

{space?.name}

-

- Created At {space?.created_at.split('T')[0]} -

-
- - - ))} -
- ) : ( -

No Space found

- )}
-
+ ) } diff --git a/mirror-2/app/home/components/sidebar.css b/mirror-2/components/ui/header.css similarity index 100% rename from mirror-2/app/home/components/sidebar.css rename to mirror-2/components/ui/header.css diff --git a/mirror-2/components/ui/header.tsx b/mirror-2/components/ui/header.tsx new file mode 100644 index 00000000..b1cdcf16 --- /dev/null +++ b/mirror-2/components/ui/header.tsx @@ -0,0 +1,141 @@ +'use client' +import React, { useState, useEffect } from 'react' +import AccountDropdownMenu from './account-dropdown-menu' +import { Button } from './button' +import Link from 'next/link' +import { + Dialog, + DialogTrigger, + DialogPortal, + DialogOverlay, + DialogContent +} from './dialog' +import { Axis3D, Gamepad2 } from 'lucide-react' +import './header.css' + +const SidebarMenuForSmallScreen = () => { + return ( + <> +
+ + + + + {process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && ( + + )} +
+ + ) +} + +const Header = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth) + const [showSmallSideBar, setShowSmallSidebar] = useState(false) + + const handleResize = () => setWindowWidth(window.innerWidth) + + useEffect(() => { + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + + useEffect(() => { + if (windowWidth > 1024) { + setShowSmallSidebar(false) + } + }, [windowWidth]) + + return ( +
+
+
+
+
+ {/* =========Sidebar button for smaller screens less than 1024px======= */} +
+ + setShowSmallSidebar(true)} + className="p-2" + > + + + + + + + + + + +
+ {/* ====================================== */} + + The Mirror logo + +
+ +
+
+
+
+ ) +} + +export default Header