[RSN-84] - Implemented UI for adding a comment (#70)

wzarek · Jun 23, 2024 · ab4ab0f · ab4ab0f
1 parent 40dd22b
commit ab4ab0f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx
@@ -2,7 +2,7 @@
 
 import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card";
 import { ButtonBase } from "@reasn/ui/src/components/shared/form";
-import { Comment } from "@reasn/ui/src/components/shared/Comment";
+import { Comment, NewComment } from "@reasn/ui/src/components/shared/Comment";
 import { useEffect, useRef, useState } from "react";
 import {
   ArrowLeft,
@@ -271,6 +271,7 @@ const EventPage = ({ params }: { params: { slug: string } }) => {
           <div className="relative">
             <h3 className="font-semibold">Komentarze:</h3>
             <div className="flex flex-col gap-2">
+              <NewComment />
               <Comment />
               <Comment />
               <Comment />

diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx
@@ -3,12 +3,13 @@ import {
   CommentDto,
   CommentDtoMapper,
 } from "@reasn/common/src/schemas/CommentDto";
+import { ButtonBase, FloatingTextarea } from "./form";
 
 interface CommentProps {
-  comment: CommentDto;
+  comment?: CommentDto;
 }
 
-export const Comment = () => {
+export const Comment = (props: CommentProps) => {
   const comment = CommentDtoMapper.fromObject({
     EventId: 1,
     Content:
@@ -36,3 +37,16 @@ export const Comment = () => {
     </div>
   );
 };
+
+export const NewComment = () => {
+  return (
+    <div className="mb-8 flex flex-col gap-4 rounded-md bg-[#4b4e526d] p-2">
+      <FloatingTextarea
+        label="Treść komentarza"
+        name="newComment"
+        className="mt-8 h-32"
+      />
+      <ButtonBase className="ml-auto" text="Dodaj" />
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { FloatingInput } from "./Input";
 import clsx from "clsx";
@@ -47,7 +49,7 @@ export const SearchMultiDropdown = (props: MultiDropdownProps) => {
         label={label}
         className="w-full rounded-b-none"
         defaultValue={search}
-        onChange={setSearch}
+        onChange={(e) => setSearch(e.target.value)}
       />
       <div className="flex h-16 flex-wrap justify-start gap-2 overflow-auto rounded-b-lg bg-[#232327] p-2 text-xs">
         {selectedOptions.concat(filteredOptions).map((option) => (

diff --git a/Client/reasn-client/packages/ui/src/components/shared/index.tsx b/Client/reasn-client/packages/ui/src/components/shared/index.tsx
@@ -2,5 +2,5 @@ export { Card, CardVariant } from "./Card";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { Interest } from "./Interest";
-export { Comment } from "./Comment";
+export { Comment, NewComment } from "./Comment";
 export { Toast } from "./Toast";