form updates

Shahan-nub · Oct 24, 2024 · c0c0288 · c0c0288
1 parent be5cd59
commit c0c0288
Show file tree

Hide file tree

Showing 10 changed files with 335 additions and 194 deletions.
diff --git a/components.json b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,21 @@
   },
   "dependencies": {
     "@next/font": "^14.2.15",
+    "@radix-ui/react-icons": "^1.3.0",
     "@reduxjs/toolkit": "^2.2.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "emoji-picker-react": "^4.12.0",
     "firebase": "^10.8.1",
+    "lucide-react": "^0.453.0",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
-    "react-redux": "^9.1.0"
+    "react-redux": "^9.1.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -30,7 +30,6 @@ html {
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
   /* background: linear-gradient(
       to bottom,
       transparent,
@@ -75,3 +74,66 @@ background: #313237;
     background-position: 100% 0;
   }
 }
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/src/components/Chat/ChatInput.jsx b/src/components/Chat/ChatInput.jsx
@@ -189,7 +189,7 @@ export default function ChatInput({ handleMessageUpdate }) {
               onChange={(e) => setChatInput(e.target.value)}
               disabled={!activeChannel}
               type="text"
-              className="w-full bg-transparent outline-none lg:mx-2 mx-1 py-2 px-2 lg:px-3"
+              className="w-full bg-transparent text-gray-300 outline-none lg:mx-2 mx-1 py-2 px-2 lg:px-3"
               placeholder={`Message ${
                 activeChannel ? "#" + activeChannel : ""
               }`}

diff --git a/src/components/Chat/Message.jsx b/src/components/Chat/Message.jsx
@@ -8,18 +8,17 @@ export default function Message({ messageInfo }) {
   let tm = null;
   let time=null;
   if(tsString){
+    console.log(tsString)
     tm = tsString.split(":");
     time=`${tm[0]}:${tm[1]}`
   }
 
-  console.log(uploadedFile)
+  // console.log(uploadedFile)
 
   const pfp = user.photo;
 
   if(message == "" || message == " ") return <></>;
 
-
-
   return (
     <div className="flex w-full items-center py-1 lg:py-2">
       <Image
@@ -31,11 +30,11 @@ export default function Message({ messageInfo }) {
         className="rounded-full mx-2 lg:mx-4 self-start"
       ></Image>
       <div className="flex flex-col lg:w-auto sm:w-[90%] w-[80%]">
-        <div className="flex items-center gap-4">
-          <h3 className="text-slate-300 text-sm lg:text-base font-semibold mr-4 lg:mr-8 ">
+        <div className="flex items-center gap-2">
+          <h3 className="text-slate-300 text-sm lg:text-base font-semibold mr-4">
             {user.displayName}
           </h3>
-          <p className="text-[.6rem] lg:text-xs font-semibold text-color-1 lg:px-2 self-end">
+          <p className="text-[.6rem] lg:text-xs font-semibold text-color-1 lg:px-2 sel">
             {time}
           </p>
         </div>

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -5,11 +5,11 @@ import { FiMenu } from "react-icons/fi";
 import SidebarChannels from "./SidebarChannels";
 import VC from "./VC";
 import Profile from "./Profile";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/lib/features/userSlice";
 import { RiArrowDropUpLine } from "react-icons/ri";
-
+import { IoIosClose } from "react-icons/io";
 import db, { collectionRef } from "@/firebase";
 import { collection, addDoc } from "firebase/firestore/lite";
 import {
@@ -45,38 +45,21 @@ export default function Sidebar() {
     console.log(channels);
   }, [setChannels]);
 
-  // const existingChannels = async () => {
-  //   const querySnapshot = await getDocs(collectionRef);
-  //   querySnapshot.forEach((doc) => {
-  //     console.log(`${doc.id} => ${doc.data()}`);
-  //   });
-  // };
-
-  // existingChannels();
-
-  //test
-
-  // let books=[];
-  // useEffect(() => {
-  //   getDocs(collectionRef)
-  //   .then((snapshot) => {
-  //     snapshot.docs.forEach((doc) => {
-  //       books.push({...doc.data(), id: doc.id})
-  //     })
-  //     console.log("books: ",books);
-  //   }).catch((err) => console.log("err while collecting data",err))
-  //   setChannels(books);
-  //   console.log("channels: ",channels)
-  // }, [setChannels]);
-
   // add channels
 
+  const channelNameRef = useRef();
+  const channelPasswordRef = useRef();
+  const [showAddChannelForm, setShowAddChannelForm] = useState(false);
+
   const handleAddChannel = async () => {
-    const newChannelName = prompt("Enter new channel name: ");
+    // const newChannelName = prompt("Enter new channel name: ");
+    const newChannelName = channelNameRef.current.value;
+    // const password = channelPasswordRef.current.value;
     if (newChannelName) {
       try {
         const newChannel = {
           channelName: newChannelName,
+          // channelPassword: password,
         };
 
         setDoc(doc(collectionRef), newChannel);
@@ -86,34 +69,65 @@ export default function Sidebar() {
     }
   };
 
-  // delete channels
-
-  // const handleDeleteChannel =(channelToDEL) => {
-  //   console.log(channelToDEL)
-  //   const channelRef = doc(db,"channels",channelToDEL);
-  //   try {
-  //     updateDoc(channelRef,{
-  //       channelName:deleteField(channelToDEL)
-  //     })
-  //   } catch (error) {
-  //     console.log("error while deleting channel",error)
-  //   }
-  // }
   const [channelsDD, setChannelsDD] = useState(true);
   const handleChannelsDD = () => {
     setChannelsDD(!channelsDD);
   };
   const activeChannel = useSelector(selectChannelName);
   return (
     <>
+      {showAddChannelForm && (
+        <div className="absolute z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-md rounded-lg bg-[black] py-4 px-6 lg:py-6 lg:px-8 text-white">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleAddChannel();
+              setShowAddChannelForm(false);
+            }}
+            className="flex flex-col gap-3 lg:gap-4 mx-auto font-sans"
+          >
+            <label className="text-xs lg:text-base font-semibold">Channel Name:</label>
+            <input
+              ref={channelNameRef}
+              type="text"
+              placeholder="Enter your channel name..."
+              className="bg-black rounded-sm border-1 border-white  focus:border-white text-white px-3 py-2 text-xs lg:text-base"
+            />
+            {/* <label className="text-xs lg:text-sm whitespace-nowrap">{`Password: (ignore to create public channel)`}</label>
+
+            <input
+              ref={channelPasswordRef}
+              type="text"
+              placeholder="Enter password..."
+              className="bg-black rounded-sm border-1 border-white focus:border-white text-white px-3 py-2 text-xs lg:text-sm"
+            /> */}
+
+              <button
+                type="submit"
+                className={`bg-white py-2 px-4 rounded-md text-black text-sm mt-3`}
+              >
+                Create
+              </button>
+              <button
+                type="btn"
+                onClick={() => setShowAddChannelForm(false)}
+                className={`bg-red-500 py-2 px-4 rounded-md text-white text-xl text-center font-bold`}
+              >
+                <IoIosClose className="mx-auto"></IoIosClose>
+              </button>
+          </form>
+        </div>
+      )}
+      {/* ------------- */}
+
       <div
         className={`flex  flex-col  justify-between bg-dc-bg min-h-screen  h-full lg:w-1/5  w-full lg:pt-[9px] 
       // ${menuState ? "visible" : " hidden lg:flex "}
     `}
       >
-        <div className="flex lg:w-[20vw] w-screen flex-col">
+        <div className="flex lg:w-[20vw] w-screen flex-col basis-[70%">
           {/* USERNAME  */}
-          <div className="flex justify-between w-full items-center lg:pb-[12px] px-4  border-color-1 shadow-lg">
+          <div className="flex justify-between w-full items-center lg:pb-[12px] px-4  border-color-1 shadow-lg basis-[10%]">
             <h2 className="text-slate-200 font-semibold text-xl md:text-3xl">
               YAP JOINT
             </h2>
@@ -127,7 +141,7 @@ export default function Sidebar() {
 
           {/* text channels Title */}
 
-          <div className="flex  justify-between items-center py-3 px-4 font-bold">
+          <div className="flex basis-[15%] justify-between items-center py-3 px-4 font-bold">
             <div className="flex items-center">
               {channelsDD ? (
                 <RiArrowDropUpLine
@@ -149,14 +163,14 @@ export default function Sidebar() {
               </h2>
             </div>
             <FaPlus
-              onClick={handleAddChannel}
+              onClick={() => setShowAddChannelForm(!showAddChannelForm)}
               className="text-color-1 cursor-pointer hover:text-white"
             ></FaPlus>
           </div>
           {/* CHANNELS  */}
           <div
-            className={`flex z-50 lg:w-auto sm:w-[60%] w-[42%] ${
-              channelsDD ? "visible" : "hidde"
+            className={`flex overflow-scroll no-scrollbar basis-[50%] z-50 lg:w-auto sm:w-[60%] w-[42%] ${
+              channelsDD ? "visible" : "hidden"
             }`}
           >
             <SidebarChannels channels={channels}></SidebarChannels>
@@ -165,7 +179,7 @@ export default function Sidebar() {
 
         <div className="flex flex-col lg:mb-3 sm:mb-5 mb-12">
           {/* VC  */}
-          <VC></VC>
+          {/* <VC></VC> */}
 
           {/* PFP AND NAME  */}
           <Profile

diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}