Better Sidebar and landing page
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { MessageCircle, Plus, Search } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
|
||||
export default function HomePage() {
|
||||
const [messages, setMessages] = useState([
|
||||
{ id: 1, user: "Alice", text: "Hey, how are you?" },
|
||||
{ id: 2, user: "You", text: "Doing good, just working on the chat app!" },
|
||||
]);
|
||||
|
||||
const [input, setInput] = useState("");
|
||||
|
||||
function sendMessage() {
|
||||
if (!input.trim()) return;
|
||||
setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
|
||||
setInput("");
|
||||
}
|
||||
|
||||
return (
|
||||
<AppSidebar>
|
||||
<div className="flex h-screen w-full bg-background">
|
||||
{/* Server Sidebar */}
|
||||
{/* <aside className="w-16 border-r flex flex-col items-center gap-4 py-4 bg-muted">
|
||||
<ServerButton
|
||||
label="Home"
|
||||
icon={<MessageCircle className="h-6 w-6" />}
|
||||
/>
|
||||
<ServerButton label="Add" icon={<Plus className="h-6 w-6" />} />
|
||||
</aside>
|
||||
|
||||
<aside className="w-64 border-r flex flex-col bg-card">
|
||||
<div className="p-3 border-b flex items-center gap-2">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Find or start a conversation" className="h-8" />
|
||||
</div>
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<DMItem name="Alice" status="online" />
|
||||
<DMItem name="Bob" status="offline" />
|
||||
<DMItem name="Charlie" status="away" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</aside> */}
|
||||
|
||||
{/* Chat Area */}
|
||||
<main className="flex-1 flex flex-col">
|
||||
<header className="h-12 px-4 flex items-center border-b text-sm font-semibold">
|
||||
Alice
|
||||
</header>
|
||||
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{messages.map((msg) => (
|
||||
<div key={msg.id} className="flex gap-2 items-start">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{msg.user[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{msg.user}</p>
|
||||
<p className="text-sm text-foreground/90">{msg.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<footer className="p-3 border-t flex gap-2">
|
||||
<Input
|
||||
placeholder="Message Alice"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
|
||||
/>
|
||||
<Button onClick={sendMessage}>Send</Button>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</AppSidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerButton({
|
||||
label,
|
||||
icon,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full h-12 w-12"
|
||||
title={label}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function DMItem({ name, status }: { name: string; status: string }) {
|
||||
return (
|
||||
<Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{name}</span>
|
||||
<span className="text-xs text-muted-foreground">{status}</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
+42
-7
@@ -5,18 +5,39 @@ import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { redirect } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const login = async () => {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
redirect("/");
|
||||
setFeedback(undefined);
|
||||
try {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
setFeedback({
|
||||
kind: "info",
|
||||
message: "Login successful! Redirecting...",
|
||||
});
|
||||
|
||||
// small delay to show feedback before redirect
|
||||
setTimeout(() => router.push("/home"), 800);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message || "Login failed. Please try again.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -24,8 +45,8 @@ export default function Login() {
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
|
||||
<h1 className="mx-auto text-3xl">Login</h1>
|
||||
<span>
|
||||
Username
|
||||
<Input onChange={(e) => setUsername(e.target.value)} />
|
||||
Username or email
|
||||
<Input onChange={(e) => setUsername(e.target.value)} type="email" />
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
@@ -34,11 +55,25 @@ export default function Login() {
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") login();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Label>
|
||||
Don't have an account? <Link href={"/signup"}>Sign Up</Link>
|
||||
Don't have an account? <Link href={"/signup"}>Sign Up</Link>
|
||||
</Label>
|
||||
|
||||
<Button className="mt-2" onClick={login}>
|
||||
|
||||
+114
-16
@@ -1,22 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { MessageCircle, Users, Shield } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function LandingPage() {
|
||||
const router = useRouter();
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<AppSidebar
|
||||
server={{
|
||||
id: "bro",
|
||||
name: "Bro",
|
||||
channels: [
|
||||
{ id: "1", name: "general", kind: "text" },
|
||||
{ id: "2", name: "random", kind: "text" },
|
||||
{ id: "3", name: "help", kind: "text" },
|
||||
{ id: "4", name: "voice-chat", kind: "voice" },
|
||||
],
|
||||
}}
|
||||
>
|
||||
ok
|
||||
</AppSidebar>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="flex items-center justify-between px-8 py-6 border-b bg-background/60 backdrop-blur-md sticky top-0 z-50">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-2xl font-bold"
|
||||
>
|
||||
Voxa
|
||||
</motion.h1>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="ghost" onClick={() => router.push("/login")}>
|
||||
Login
|
||||
</Button>
|
||||
<Button onClick={() => router.push("/signup")}>Get Started</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<main className="flex-1 flex flex-col items-center justify-center text-center px-6 py-20">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"
|
||||
>
|
||||
Chat. Connect. Collaborate.
|
||||
</motion.h2>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mb-8">
|
||||
A modern chat app for teams and friends. Stay connected with real-time
|
||||
messaging, secure channels, and seamless collaboration.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button size="lg" onClick={() => router.push("/signup")}>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => router.push("/docs/introduction")}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Features */}
|
||||
<section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
|
||||
<FeatureCard
|
||||
icon={<MessageCircle className="h-10 w-10 text-primary" />}
|
||||
title="Real-Time Chat"
|
||||
description="Experience instant messaging with typing indicators, read receipts, and more with our self-hostable node system."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users className="h-10 w-10 text-primary" />}
|
||||
title="Group Channels"
|
||||
description="Organize conversations into channels for projects, teams, or friends by hosting your own server."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-10 w-10 text-primary" />}
|
||||
title="Secure & Private"
|
||||
description="Your data is encrypted and protected, ensuring safe communication."
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
{/* <section className="bg-muted py-20 px-6 text-center">
|
||||
<h3 className="text-3xl font-semibold mb-4">
|
||||
Ready to start chatting?
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Create your free account today and bring your conversations together.
|
||||
</p>
|
||||
<div className="max-w-md mx-auto flex gap-2">
|
||||
<Input placeholder="Enter your email" />
|
||||
<Button>Sign Up</Button>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} Voxa. All rights reserved.
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-6 flex flex-col items-center text-center">
|
||||
{icon}
|
||||
<h4 className="mt-4 font-semibold text-xl">{title}</h4>
|
||||
<p className="mt-2 text-muted-foreground">{description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -83,8 +83,16 @@ export default function Server() {
|
||||
}, [ip, user, loading]);
|
||||
|
||||
return (
|
||||
<AppSidebar server={{ channels: [], ...server } as ServerType}>
|
||||
<AppSidebar
|
||||
server={
|
||||
{
|
||||
channels: [{ id: "general", name: "General", kind: "text" }],
|
||||
...server,
|
||||
} as ServerType
|
||||
}
|
||||
>
|
||||
<MessageBox
|
||||
channelName="General"
|
||||
userList={userList}
|
||||
setUserList={setUserList}
|
||||
messages={messages
|
||||
|
||||
+103
-10
@@ -5,28 +5,92 @@ import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { redirect } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function SignUp() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [acceptTerms, setAcceptTerms] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const validateInput = ():
|
||||
| { kind: "error" | "info"; message: string }
|
||||
| undefined => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
|
||||
|
||||
if (!emailRegex.test(email)) {
|
||||
return { kind: "error", message: "Invalid email format." };
|
||||
}
|
||||
if (!usernameRegex.test(username)) {
|
||||
return {
|
||||
kind: "error",
|
||||
message:
|
||||
"Username must be 3–20 characters and only letters, numbers, or underscores.",
|
||||
};
|
||||
}
|
||||
if (password.length < 6) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "Password must be at least 6 characters long.",
|
||||
};
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
return { kind: "error", message: "Passwords do not match." };
|
||||
}
|
||||
if (!acceptTerms) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "You must accept the terms to sign up.",
|
||||
};
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const signup = async () => {
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
redirect("/");
|
||||
setFeedback(undefined);
|
||||
const validationError = validateInput();
|
||||
if (validationError) {
|
||||
setFeedback(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
|
||||
setFeedback({ kind: "info", message: "Account created! Redirecting..." });
|
||||
setTimeout(() => router.push("/home"), 1000);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message ||
|
||||
"Signup failed. Please try again later.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex items-center">
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
|
||||
<h1 className="mx-auto text-3xl">Sign Up</h1>
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900 shadow-lg">
|
||||
<h1 className="mx-auto text-3xl font-bold">Create an Account</h1>
|
||||
<span>
|
||||
Email
|
||||
<Input
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={"[email protected]"}
|
||||
placeholder="[email protected]"
|
||||
type="email"
|
||||
/>
|
||||
</span>
|
||||
@@ -34,13 +98,20 @@ export default function SignUp() {
|
||||
Username
|
||||
<Input
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={"john"}
|
||||
placeholder="john_doe"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Confirm Password
|
||||
<Input
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") signup();
|
||||
}}
|
||||
@@ -48,8 +119,30 @@ export default function SignUp() {
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Button className="mt-4" onClick={signup}>
|
||||
Login
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={acceptTerms}
|
||||
onChange={(e) => setAcceptTerms(e.target.checked)}
|
||||
/>
|
||||
I agree to the <Link className="underline" href="/terms">terms & conditions</Link>
|
||||
</label>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="mt-4" onClick={signup} disabled={loading}>
|
||||
{loading ? "Signing Up..." : "Sign Up"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,16 +131,23 @@ export default function MessageBox({
|
||||
userList,
|
||||
setUserList,
|
||||
sendMessage,
|
||||
channelName,
|
||||
}: {
|
||||
messages: Message[];
|
||||
userList: NumberMap<User>;
|
||||
setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
|
||||
sendMessage: (m: string) => void;
|
||||
channelName?: string;
|
||||
}) {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full flex flex-col py-5 pl-5 gap-5">
|
||||
<div className="h-screen w-full flex flex-col pb-5 pl-5 gap-5">
|
||||
{channelName && (
|
||||
<header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
|
||||
{channelName}
|
||||
</header>
|
||||
)}
|
||||
<div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
|
||||
{messages.map((msg) => (
|
||||
<MessageContainer
|
||||
|
||||
+165
-104
@@ -1,21 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarProvider,
|
||||
} from "./ui/sidebar";
|
||||
import { ChevronDown, HashIcon, MicIcon } from "lucide-react";
|
||||
import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu";
|
||||
HashIcon,
|
||||
MessageCircle,
|
||||
Plus,
|
||||
Search,
|
||||
Volume2Icon,
|
||||
} from "lucide-react";
|
||||
import Server from "@/types/server";
|
||||
import { useEffect, useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
@@ -32,7 +23,11 @@ import {
|
||||
import { Input } from "./ui/input";
|
||||
import { Label } from "./ui/label";
|
||||
import { Button } from "./ui/button";
|
||||
import Link from "next/link";
|
||||
import { Card } from "./ui/card";
|
||||
import { Avatar, AvatarFallback } from "./ui/avatar";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Channel from "@/types/channel";
|
||||
|
||||
export default function AppSidebar({
|
||||
server,
|
||||
@@ -43,6 +38,7 @@ export default function AppSidebar({
|
||||
}>) {
|
||||
const [servers, setServers] = useState<[string, string][]>([]);
|
||||
const [newServer, setNewServer] = useState({ name: "", ip: "" });
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const s = Cookies.get("servers")?.split(",");
|
||||
@@ -63,97 +59,162 @@ export default function AppSidebar({
|
||||
setNewServer({ name: "", ip: "" });
|
||||
};
|
||||
|
||||
return server ? (
|
||||
<Dialog>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add server</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new server to your server list.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<div className="h-screen flex border-r">
|
||||
<div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
|
||||
<Button
|
||||
onClick={() => router.push(`/home`)}
|
||||
className="bg-transparent text-accent-foreground hover:text-accent"
|
||||
>
|
||||
<MessageCircle className="h-6 w-6" />
|
||||
</Button>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="name-1">Name</Label>
|
||||
<Input
|
||||
id="name-1"
|
||||
name="name"
|
||||
value={newServer.name}
|
||||
onChange={(e) =>
|
||||
setNewServer((prev) => ({ ...prev, name: e.target.value }))
|
||||
}
|
||||
placeholder="Voxa Server"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="ip-1">Server Ip</Label>
|
||||
<Input
|
||||
id="ip-1"
|
||||
name="ip"
|
||||
value={newServer.ip}
|
||||
onChange={(e) =>
|
||||
setNewServer((prev) => ({ ...prev, ip: e.target.value }))
|
||||
}
|
||||
placeholder="192.168.1.5"
|
||||
/>
|
||||
</div>
|
||||
{servers.map(
|
||||
([ip, name]) =>
|
||||
ip && (
|
||||
<Button
|
||||
onClick={() => router.push(`/server/${ip}`)}
|
||||
key={ip}
|
||||
className="bg-transparent text-accent-foreground hover:text-accent"
|
||||
>
|
||||
<HashIcon className="h-6 w-6" />
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add server</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new server to your server list.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="name-1">Name</Label>
|
||||
<Input
|
||||
id="name-1"
|
||||
name="name"
|
||||
value={newServer.name}
|
||||
onChange={(e) =>
|
||||
setNewServer((prev) => ({
|
||||
...prev,
|
||||
name: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Voxa Server"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="ip-1">Server Ip</Label>
|
||||
<Input
|
||||
id="ip-1"
|
||||
name="ip"
|
||||
value={newServer.ip}
|
||||
onChange={(e) =>
|
||||
setNewServer((prev) => ({
|
||||
...prev,
|
||||
ip: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="192.168.1.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" onClick={handleAddServer}>
|
||||
Add server
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" onClick={handleAddServer}>
|
||||
Add server
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
{/* Right column */}
|
||||
<div className="w-64 flex flex-col bg-card">
|
||||
{server ? (
|
||||
<div className="p-3 border-b flex items-center gap-2">
|
||||
<h2>{server.name}</h2>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-3 border-b flex items-center gap-2">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Find or start a conversation"
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
{server ? (
|
||||
<>
|
||||
{server.channels.map((channel) => (
|
||||
<ChannelProp key={channel.id} {...channel} />
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DMItem name="Alice" status="online" />
|
||||
<DMItem name="Bob" status="offline" />
|
||||
<DMItem name="Charlie" status="away" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SidebarProvider defaultOpen>
|
||||
<Sidebar>
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
{server.name}
|
||||
<ChevronDown className="ml-auto" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
|
||||
{servers.map((s, i) => (
|
||||
<DropdownMenuItem key={i} asChild>
|
||||
<Link href={"/server/" + s[0]}>{s[1] || s[0]}</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
|
||||
<DialogTrigger asChild>
|
||||
<DropdownMenuItem>Add Server</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent className="px-2">
|
||||
{server.channels.map((channel) => (
|
||||
<SidebarMenuButton key={channel.id} className="gap-1.5">
|
||||
{channel.kind === "voice" ? <MicIcon /> : <HashIcon />}
|
||||
{channel.name}
|
||||
</SidebarMenuButton>
|
||||
))}
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
{children}
|
||||
</SidebarProvider>
|
||||
</Dialog>
|
||||
) : (
|
||||
children
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DMItem({ name, status }: { name: string; status: string }) {
|
||||
return (
|
||||
<Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{name}</span>
|
||||
<span className="text-xs text-muted-foreground">{status}</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelProp(channel: Channel) {
|
||||
return (
|
||||
<Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<ChannelIcon kind={channel.kind} />
|
||||
<span className="text-sm font-medium">{channel.name}</span>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
|
||||
switch (kind) {
|
||||
case "text":
|
||||
return <HashIcon className="h-4 w-4" />;
|
||||
case "voice":
|
||||
return <Volume2Icon className="h-4 w-4" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
Reference in New Issue
Block a user