Listen to and share the music in the Atmosphere.
musicsky.up.railway.app/
nextjs
atproto
music
typescript
react
feat: add `theme-toggle` to pages
+16
-9
+9
-5
src/app/auth/login/page.tsx
+9
-5
src/app/auth/login/page.tsx
···
11
11
CardTitle,
12
12
} from "@/components/ui/card";
13
13
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
14
+
import { ThemeToggle } from "@/components/theme-toggle";
14
15
15
16
export default function Login() {
16
17
const [handle, setHandle] = useState("");
···
45
46
46
47
return (
47
48
<Card className="w-full max-w-sm mx-auto">
48
-
<CardHeader>
49
-
<CardTitle>Sign in</CardTitle>
50
-
<CardDescription>
51
-
Enter your handle to sign in to your account.
52
-
</CardDescription>
49
+
<CardHeader className="flex flex-row justify-between">
50
+
<div className="flex flex-col gap-4">
51
+
<CardTitle>Sign in</CardTitle>
52
+
<CardDescription>
53
+
Enter your handle to sign in to your account.
54
+
</CardDescription>
55
+
</div>
56
+
<ThemeToggle />
53
57
</CardHeader>
54
58
<CardContent>
55
59
<form onSubmit={handleSubmit} className="space-y-4">
+7
-4
src/app/page.tsx
+7
-4
src/app/page.tsx
···
7
7
import { cn } from "@/lib/utils";
8
8
import { Button } from "@/components/ui/button";
9
9
import Link from "next/link";
10
+
import { ThemeToggle } from "@/components/theme-toggle";
10
11
11
12
export default async function Home() {
12
13
const session = await getSession();
···
20
21
21
22
return (
22
23
<main className="flex flex-col gap-4 w-full max-w-md mx-auto p-8">
23
-
<div className="text-center mb-8">
24
-
<h1 className="text-3xl font-bold text-indigo-600 mb-2">MusicSky</h1>
24
+
<div className="mb-8 flex flex-row justify-between items-center">
25
+
<h1 className="text-3xl font-bold text-primary">MusicSky</h1>
26
+
<ThemeToggle />
25
27
</div>
26
28
27
29
<div className="bg-card rounded-lg border border-input p-6">
···
41
43
<Activity mode={profile.displayName ? "visible" : "hidden"}>
42
44
<p className="font-semibold">{profile.displayName}</p>
43
45
</Activity>
44
-
<p
46
+
<Link
47
+
href={`/${profile.handle}`}
45
48
className={cn(
46
49
profile.displayName && "text-sm text-muted-foreground",
47
50
)}
48
51
>
49
52
@{profile.handle}
50
-
</p>
53
+
</Link>
51
54
</div>
52
55
</div>
53
56
<LogoutButton />