Merge pull request #1 from kleo-dev/ui-and-functionality
UI and Functionality
This commit is contained in:
Klesti Selimaj
Generated
+136
@@ -10,9 +10,11 @@
|
||||
"dependencies": {
|
||||
"@lexical/react": "^0.34.0",
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
@@ -26,6 +28,7 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"emoji-picker-react": "^4.13.2",
|
||||
"framer-motion": "^12.23.22",
|
||||
"http-status-codes": "^2.3.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lexical": "^0.34.0",
|
||||
@@ -1004,6 +1007,12 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
|
||||
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||
@@ -1033,6 +1042,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-avatar": {
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
|
||||
"integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-is-hydrated": "0.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
|
||||
@@ -1451,6 +1487,37 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-scroll-area": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
|
||||
"integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||
@@ -1596,6 +1663,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-is-hydrated": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
|
||||
"integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"use-sync-external-store": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-layout-effect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
|
||||
@@ -2583,6 +2668,33 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.23.22",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
|
||||
"integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.21",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
@@ -4059,6 +4171,21 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.21",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
|
||||
"integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@@ -4968,6 +5095,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vfile": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
|
||||
|
||||
@@ -13,9 +13,11 @@
|
||||
"dependencies": {
|
||||
"@lexical/react": "^0.34.0",
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
@@ -29,6 +31,7 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"emoji-picker-react": "^4.13.2",
|
||||
"framer-motion": "^12.23.22",
|
||||
"http-status-codes": "^2.3.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"lexical": "^0.34.0",
|
||||
|
||||
@@ -84,7 +84,7 @@ export async function GET(req: NextRequest) {
|
||||
{ status: StatusCodes.BAD_REQUEST }
|
||||
);
|
||||
else {
|
||||
const id = query_id ? query_id : token ? CLIENT_AUTH_TOKENS[token] : null;
|
||||
const id = query_id ? parseInt(query_id) : token ? CLIENT_AUTH_TOKENS[token] : null;
|
||||
|
||||
if (!id)
|
||||
return NextResponse.json(
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useState } from "react";
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
import MessageBox from "@/components/MessageBox";
|
||||
|
||||
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>
|
||||
<MessageBox
|
||||
channelName="Alice"
|
||||
messages={[]}
|
||||
userList={[]}
|
||||
setUserList={() => {}}
|
||||
sendMessage={() => {}}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
+48
-7
@@ -5,16 +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 (
|
||||
@@ -22,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
|
||||
@@ -32,10 +55,28 @@ export default function Login() {
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") login();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Button className="mt-4" onClick={login}>
|
||||
{/* 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>
|
||||
</Label>
|
||||
|
||||
<Button className="mt-2" onClick={login}>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
+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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import Message from "@/types/message";
|
||||
import useUser, { User } from "@/hooks/get-user";
|
||||
import Cookies from "js-cookie";
|
||||
import axios from "axios";
|
||||
import { StringMap } from "@/types/typeUtils";
|
||||
import { NumberMap, StringMap } from "@/types/typeUtils";
|
||||
import ServerType from "@/types/server";
|
||||
|
||||
export default function Server() {
|
||||
@@ -17,7 +17,7 @@ export default function Server() {
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const { user, loading } = useUser();
|
||||
const [userList, setUserList] = useState<StringMap<User>>({});
|
||||
const [userList, setUserList] = useState<NumberMap<User>>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!ip || !user || loading) return;
|
||||
@@ -83,9 +83,18 @@ 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
|
||||
.filter((m) => m.channel_id === "general")
|
||||
.toReversed()}
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
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 () => {
|
||||
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 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]"
|
||||
type="email"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Username
|
||||
<Input
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
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();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -11,20 +11,32 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "./ui/dropdown-menu";
|
||||
import { SmilePlusIcon } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { format, isToday, isYesterday } from "date-fns";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { StringMap } from "@/types/typeUtils";
|
||||
import { NumberMap, StringMap } from "@/types/typeUtils";
|
||||
import { User } from "@/hooks/get-user";
|
||||
import axios from "axios";
|
||||
|
||||
function MessageContainer({
|
||||
message,
|
||||
userList,
|
||||
setUserList,
|
||||
}: {
|
||||
message: Message;
|
||||
userList: StringMap<User>;
|
||||
userList: NumberMap<User>;
|
||||
setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get("/api/user/", { params: { id: message.from } })
|
||||
.then((res) =>
|
||||
setUserList((prev) => ({ ...prev, [message.from]: res.data as User }))
|
||||
)
|
||||
.catch(console.error);
|
||||
}, [message.from, setUserList]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
|
||||
<div className="flex gap-2">
|
||||
@@ -117,19 +129,33 @@ function MessageContainer({
|
||||
export default function MessageBox({
|
||||
messages,
|
||||
userList,
|
||||
setUserList,
|
||||
sendMessage,
|
||||
channelName,
|
||||
}: {
|
||||
messages: Message[];
|
||||
userList: StringMap<User>;
|
||||
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 key={msg.id} message={msg} userList={userList} />
|
||||
<MessageContainer
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
userList={userList}
|
||||
setUserList={setUserList}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-full flex gap-3 pr-5">
|
||||
|
||||
+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 }
|
||||
@@ -2,10 +2,14 @@ export type StringMap<T> = {
|
||||
[key: string]: T;
|
||||
};
|
||||
|
||||
export type NumberMap<T> = {
|
||||
[key: number]: T;
|
||||
};
|
||||
|
||||
export function narrow<T>(s: T, defd: T, ...allowed: T[]): T {
|
||||
if (allowed.includes(s) || s == defd) {
|
||||
return s;
|
||||
} else {
|
||||
return defd;
|
||||
}
|
||||
if (allowed.includes(s) || s == defd) {
|
||||
return s;
|
||||
} else {
|
||||
return defd;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user