Add src/app/messaging/page.tsx

2026-05-15 11:52:34 +00:00
parent 59fc23c542
commit fe94ae5e07
1 changed files with 68 additions and 0 deletions
--- a/src/app/messaging/page.tsx
+++ b/src/app/messaging/page.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { useState } from "react";
+
+export default function MessagingPage() {
+  const [activeChat, setActiveChat] = useState<string | null>("1");
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Features", id: "/#features" },
+                { name: "Messaging", id: "/messaging" },
+            ]}
+            brandName="Sohix"
+        />
+        
+        <main className="container mx-auto mt-24 px-4 flex h-[80vh] gap-6">
+            <div className="w-1/3 border-r pr-6 overflow-y-auto">
+                <h2 className="text-2xl font-semibold mb-6">Conversations</h2>
+                {[1, 2, 3].map((id) => (
+                    <div 
+                        key={id} 
+                        onClick={() => setActiveChat(id.toString())}
+                        className={`p-4 rounded-xl mb-3 cursor-pointer ${activeChat === id.toString() ? "bg-accent/10" : "bg-card"}`}>
+                        <div className="flex justify-between items-center">
+                            <p className="font-medium">User {id}</p>
+                            {id === 1 && <span className="bg-primary-cta text-white text-xs px-2 py-1 rounded-full">2</span>}
+                        </div>
+                        <p className="text-sm text-gray-500">Latest message preview...</p>
+                    </div>
+                ))}
+            </div>
+            <div className="flex-1 flex flex-col">
+                <div className="flex-1 bg-card rounded-2xl p-6 border flex flex-col">
+                    <h3 className="font-bold mb-4 border-b pb-4">Chat with User {activeChat}</h3>
+                    <div className="flex-1 space-y-4">
+                        <div className="bg-accent/10 p-3 rounded-lg w-fit">Hey, how are you?</div>
+                        <div className="bg-primary-cta text-white p-3 rounded-lg w-fit ml-auto">I'm good, thanks!</div>
+                    </div>
+                    <input 
+                        type="text"
+                        placeholder="Type a message..."
+                        className="mt-4 w-full p-4 rounded-xl border bg-background"
+                    />
+                </div>
+            </div>
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}