new sections and auth added

the-mirror-gdp · Oct 15, 2024 · 1aa93bf · 1aa93bf
1 parent ee17899
commit 1aa93bf
Show file tree

Hide file tree

Showing 15 changed files with 381 additions and 140 deletions.
diff --git a/mirror-2/app/(auth-pages)/create-account/page.tsx b/mirror-2/app/(auth-pages)/create-account/page.tsx
@@ -1,16 +1,26 @@
-"use client"
+"use client";
 import { createAccountAction, loginAction } from "@/actions/auth";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useRedirectToHomeIfSignedIn } from "@/hooks/auth";
 import { AppLogoImageMedium } from "@/lib/theme-service";
 import Link from "next/link";
 
-export default function CreateAccount({ searchParams }: { searchParams: Message }) {
-  useRedirectToHomeIfSignedIn()
+export default function CreateAccount({
+  searchParams,
+}: {
+  searchParams: Message;
+}) {
+  useRedirectToHomeIfSignedIn();
   return (
     <form>
       <Card className="w-full max-w-sm">
@@ -25,19 +35,34 @@ export default function CreateAccount({ searchParams }: { searchParams: Message
         <CardContent className="grid gap-4">
           <div className="grid gap-2">
             <Label htmlFor="email">Email</Label>
-            <Input id="email" type="email" name="email" placeholder="[email protected]" required />
+            <Input
+              id="email"
+              type="email"
+              name="email"
+              placeholder="[email protected]"
+              required
+            />
           </div>
           <div className="grid gap-2">
             <Label htmlFor="password">Password</Label>
             <Input id="password" type="password" name="password" required />
           </div>
         </CardContent>
         <CardFooter className="grid grid-cols-1 gap-3">
-          <SubmitButton className="w-full" pendingText="Creating Account..." formAction={createAccountAction}>Create Account</SubmitButton>
+          <SubmitButton
+            className="w-full"
+            pendingText="Creating Account..."
+            formAction={createAccountAction}
+          >
+            Create Account
+          </SubmitButton>
           <FormMessage message={searchParams} />
           <p className="text-sm text-muted-foreground">
             Already have an account?{" "}
-            <Link className="text-foreground font-medium underline" href="/login">
+            <Link
+              className="text-foreground font-medium underline"
+              href="/login"
+            >
               Login
             </Link>
           </p>

diff --git a/mirror-2/app/(auth-pages)/login/page.tsx b/mirror-2/app/(auth-pages)/login/page.tsx
@@ -1,8 +1,14 @@
-"use client"
+"use client";
 import { loginAction } from "@/actions/auth";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useRedirectToHomeIfSignedIn } from "@/hooks/auth";
@@ -11,9 +17,9 @@ import Link from "next/link";
 import { useRef } from "react";
 
 export default function Login({ searchParams }: { searchParams: Message }) {
-  useRedirectToHomeIfSignedIn()
+  useRedirectToHomeIfSignedIn();
 
-  const isDevelopment = process.env.NODE_ENV === 'development';
+  const isDevelopment = process.env.NODE_ENV === "development";
 
   // References for email and password fields
   const emailRef = useRef<HTMLInputElement>(null);
@@ -23,7 +29,7 @@ export default function Login({ searchParams }: { searchParams: Message }) {
   const handleDevLoginWithUser = (userEmail: string) => {
     if (emailRef.current && passwordRef.current) {
       emailRef.current.value = userEmail;
-      passwordRef.current.value = 'password';  // Default password for all dev users
+      passwordRef.current.value = "password"; // Default password for all dev users
     }
 
     // Simulate form submission by calling formAction
@@ -45,21 +51,41 @@ export default function Login({ searchParams }: { searchParams: Message }) {
         <CardContent className="grid gap-4">
           <div className="grid gap-2">
             <Label htmlFor="email">Email</Label>
-            <Input ref={emailRef} id="email" type="email" name="email" placeholder="[email protected]" required />
+            <Input
+              ref={emailRef}
+              id="email"
+              type="email"
+              name="email"
+              placeholder="[email protected]"
+              required
+            />
           </div>
           <div className="grid gap-2">
             <Label htmlFor="password">Password</Label>
-            <Input ref={passwordRef} id="password" type="password" name="password" required />
+            <Input
+              ref={passwordRef}
+              id="password"
+              type="password"
+              name="password"
+              required
+            />
           </div>
         </CardContent>
         <CardFooter className="grid grid-cols-1 gap-5">
-          <SubmitButton className="w-full" pendingText="Signing In..." formAction={loginAction}>
+          <SubmitButton
+            className="w-full"
+            pendingText="Signing In..."
+            formAction={loginAction}
+          >
             Login
           </SubmitButton>
           <FormMessage message={searchParams} />
           <p className="text-sm text-muted-foreground">
             Don't have an account?{" "}
-            <Link className="text-foreground font-medium underline" href="/create-account">
+            <Link
+              className="text-foreground font-medium underline"
+              href="/create-account"
+            >
               Create Account
             </Link>
           </p>
@@ -70,21 +96,21 @@ export default function Login({ searchParams }: { searchParams: Message }) {
               <button
                 type="button"
                 className="bg-gray-900 p-2 rounded-md"
-                onClick={() => handleDevLoginWithUser('[email protected]')}
+                onClick={() => handleDevLoginWithUser("[email protected]")}
               >
                 Dev Login with User 1
               </button>
               <button
                 type="button"
                 className="bg-gray-900 p-2 rounded-md"
-                onClick={() => handleDevLoginWithUser('[email protected]')}
+                onClick={() => handleDevLoginWithUser("[email protected]")}
               >
                 Dev Login with User 2
               </button>
               <button
                 type="button"
                 className="bg-gray-900 p-2 rounded-md"
-                onClick={() => handleDevLoginWithUser('[email protected]')}
+                onClick={() => handleDevLoginWithUser("[email protected]")}
               >
                 Dev Login with User 3
               </button>

diff --git a/mirror-2/app/home/components/sidebar.tsx b/mirror-2/app/home/components/sidebar.tsx
@@ -43,7 +43,7 @@ export function Sidebar({ className, playlists, style }: SidebarProps) {
               className="w-full justify-start"
               asChild
             >
-              <Link href="/my-spaces" className="w-full p-3">
+              <Link href="/my/spaces" className="w-full p-3">
                 <Axis3D className="mr-2" />
                 My Spaces
               </Link>
@@ -53,7 +53,7 @@ export function Sidebar({ className, playlists, style }: SidebarProps) {
               className="w-full justify-start"
               asChild
             >
-              <Link href="/my-assets" className="w-full p-3">
+              <Link href="/my/assets" className="w-full p-3">
                 <Axis3D className="mr-2" />
                 My Assets
               </Link>

diff --git a/mirror-2/app/home/page.tsx b/mirror-2/app/home/page.tsx
@@ -1,18 +1,20 @@
+"use client";
 import Image from "next/image";
 import { Sidebar } from "./components/sidebar";
 import { listenNowAlbums, madeForYouAlbums } from "./data/albums";
 import { playlists } from "./data/playlists";
 import { Separator } from "@/components/ui/separator";
 import { appDescription, appName } from "@/lib/theme-service";
-import { Metadata } from "next";
 import AccountDropdownMenu from "@/components/ui/account-dropdown-menu";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { useGetSpacesByUserIdQuery } from "@/state/spaces";
+
+const dummyImg =
+  "https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80";
 
-export const metadata: Metadata = {
-  title: "The Mirror",
-  description: "",
-};
 export default function Home() {
+  const { data: spaces, error } = useGetSpacesByUserIdQuery("");
+
   return (
     <>
       <div className="md:hidden hidden">
@@ -99,7 +101,7 @@ export default function Home() {
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 py-6">
-              {madeForYouAlbums.slice(0, 4).map((album) => (
+              {spaces?.slice(0, 4).map((space) => (
                 <Card
                   className="rounded-none"
                   style={{
@@ -109,10 +111,10 @@ export default function Home() {
                 >
                   <CardContent className="p-0">
                     <Image
-                      src={album?.cover}
+                      src={dummyImg}
                       width={250}
                       height={250}
-                      alt={album?.name}
+                      alt={space?.name}
                       style={{
                         height: "250px",
                         width: "100%",
@@ -121,9 +123,11 @@ export default function Home() {
                   </CardContent>
                   <CardFooter>
                     <div className="space-y-1 text-lg mt-4">
-                      <h3 className="font-medium leading-none">{album.name}</h3>
+                      <h3 className="font-medium leading-none">
+                        {space?.name}
+                      </h3>
                       <p className="text-xs text-muted-foreground">
-                        {album.artist}
+                        Created At {space?.created_at.split("T")[0]}
                       </p>
                     </div>
                   </CardFooter>

diff --git a/mirror-2/app/my/account/page.tsx b/mirror-2/app/my/account/page.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { Separator } from "@/components/ui/separator";
+import { Metadata } from "next";
+import { Sidebar } from "@/app/home/components/sidebar";
+import { playlists } from "@/app/home/data/playlists";
+
+export const metadata: Metadata = {
+  title: "Discover",
+  description: "",
+};
+const MyAccount = () => {
+  return (
+    <div className="bg-background flex">
+      <Sidebar
+        playlists={playlists}
+        className="hidden lg:block w "
+        style={{
+          width: "25%",
+        }}
+      />
+      <div
+        className="py-6 px-6 w-full"
+        style={{
+          maxWidth: "50%",
+        }}
+      >
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h2 className="text-3xl font-semibold tracking-tight">
+              Account Settings
+            </h2>
+          </div>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex items-center gap-2 mobile:gap-1 w-full justify-between">
+          <div className="flex relative">
+            <div className="flex-wrap mt-1 rounded-md shadow-sm">
+              <input
+                id="email"
+                autoComplete="none"
+                name="email"
+                type="email"
+                placeholder="[email protected]"
+                className="block h-[3.125rem] rounded-xl focus:outline-none pt-6 pl-4 bg-bluenav text-white text-base font-semibold font-primary border-gray-700 text-disabledMirror focus:border-ringBlue border-none bg-transparent"
+                value="[email protected]"
+              />
+              <label
+                htmlFor="email"
+                className="absolute left-4 top-2 text-textInput text-xs font-semibold font-primary peer-placeholder-shown:text-sm peer-focus:text-xs"
+              >
+                Email
+              </label>
+            </div>
+          </div>
+          <button
+            type="button"
+            className="flex justify-center max-h-[3.125rem] items-center whitespace-nowrap p-3 bg-blueMirror rounded-xl font-primary font-semibold border border-transparent text-white shadow-[0_2px_40px_0px_rgba(57,121,255,0.4)]  min-w-fit mobile:text-xs bg-transparent shadowNone text-blueMirror bg-[#121428]
+      hover:bg-blue-700 hover:ease-in duration-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+              className="w-6 h-6"
+            >
+              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
+            </svg>{" "}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyAccount;
diff --git a/mirror-2/app/my-assets/page.tsx → mirror-2/app/my/assets/page.tsx b/mirror-2/app/my-assets/page.tsx → mirror-2/app/my/assets/page.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { madeForYouAlbums } from "../home/data/albums";
+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 { 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";