Finish Create ChatRoom LAyout

Wadie-ess · Sep 17, 2023 · 6fda9fc · 6fda9fc
1 parent 4a31073
commit 6fda9fc
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 15 deletions.
diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json
diff --git a/frontend/code/package.json b/frontend/code/package.json
@@ -11,6 +11,7 @@
  "@types/react": "^18.2.15",
  "@types/react-dom": "^18.2.7",
  "axios": "^1.5.0",
+ "preline": "^1.9.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.46.1",

diff --git a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx
@@ -8,11 +8,11 @@ import {
  yas3,
  yas4,
  SearchIcon,
- EditIcon,
- More,
+ // EditIcon,
+ // More,
  Send,
- Close,
- Bio,
+ // Close,
+ // Bio,
  GroupChat,
  check,
  MessageDummy,
@@ -129,6 +129,11 @@ export const ChatPlaceHolder = ({
 
 export const OnlineNowUsers = () => {
  const [Users] = useState(MessageDummy);
+ const [selectedOption, setSelectedOption] = useState("Public"); // Initialize with a default value
+
+ const handleOptionChange = (e: any) => {
+ setSelectedOption(e.target.value);
+ };
  return (
  <>
  <div className="online-now-container pt-5 pl-5 pb-2 pr-3 bg-[#1A1C26]">
@@ -162,6 +167,55 @@ export const OnlineNowUsers = () => {
  />
  </div>
  </div>
+
+ <div className="flex flex-row form-control justify-around">
+ <label className="label cursor-pointer ">
+ <span className="label-text pr-2">Public</span>
+ <input
+ type="radio"
+ name="radio-10"
+ value="Public"
+ className="radio checked:bg-purple-500"
+ checked={selectedOption === "Public"}
+ onChange={handleOptionChange}
+ />
+ </label>
+ <label className="label cursor-pointer">
+ <span className="label-text pr-2">Private</span>
+ <input
+ type="radio"
+ name="radio-10"
+ value="Private"
+ className="radio checked:bg-red-500"
+ checked={selectedOption === "Private"}
+ onChange={handleOptionChange}
+ />
+ </label>
+ <label className="label cursor-pointer">
+ <span className="label-text pr-2">Protected</span>
+ <input
+ type="radio"
+ name="radio-10"
+ value="Protected"
+ className="radio checked:bg-orange-500"
+ checked={selectedOption === "Protected"}
+ onChange={handleOptionChange}
+ />
+ </label>
+ </div>
+
+ {/* Conditionally render the text input */}
+ {selectedOption === "Protected" && (
+ <div className="flex flex-row p-3">
+ <div className="flex flex-row w-full justify-center pt-2">
+ <p>Group Password</p>
+ <input
+ type="Password"
+ className="input w-full shadow-xl max-w-lg bg-[#272932] placeholder:text-gray-400 font-poppins text-base font-normal leading-normal"
+ />
+ </div>
+ </div>
+ )}
  <p className="p-2">Select To Add Friends</p>
 
  {/* Scrollable part */}
@@ -180,8 +234,10 @@ export const OnlineNowUsers = () => {
  </div>
 
  <div className="modal-action">
- <a href="#" className="btn hover:bg-green-700">
- Done!
+ {
+ // eslint-disable-next-line
+ }<a href="#" className="btn hover:bg-purple-500">
+ {" "}
  </a>
  </div>
  </div>

diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx
@@ -1,17 +1,17 @@
 import {
- UserImage,
  yas,
- yas1,
- yas2,
- yas3,
- yas4,
- SearchIcon,
- EditIcon,
+ // UserImage,
+ // yas1,
+ // yas2,
+ // yas3,
+ // yas4,
+ // SearchIcon,
+ // EditIcon,
+ // GroupChat,
  More,
  Send,
  Close,
  Bio,
- GroupChat,
 } from "./Components/tools/Assets";
 import { useState } from "react";
 import {

diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
  "./src/**/*.{js,jsx,ts,tsx}",
  "./src/**/**/*.{js,jsx,ts,tsx}",
  "./src/**/**/**/*.{js,jsx,ts,tsx}",
+
  ],
  theme: {
  extend: {
@@ -25,7 +26,10 @@ module.exports = {
  },
  },
 
- plugins: [require("daisyui")],
+ plugins: [
+ require("daisyui"),
+ require('preline/plugin'),
+],
  daisyui: {
  themes: [
  {