[RSN-71] - Implemented event browse page

Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx

@@ -12,9 +12,9 @@ import { ChangeEvent, useState } from "react";
 import { ArrowLeft, Clock, Location, Upload } from "@reasn/ui/src/icons";
 import { useRouter } from "next/navigation";
 import clsx from "clsx";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
-import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+import { getStatusClass } from "@reasn/common/src/helpers/uiHelpers";
 
 const IMAGES = [
   "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
@@ -28,7 +28,7 @@ const IMAGES = [
   "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
 ];
 
-const MOCK_TAGS = [
+export const MOCK_TAGS = [
   "abcd",
   "efgh",
   "ijkl",
@@ -155,7 +155,7 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
               />
             </div>
           )}
-          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+          <div className="mt-8 flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
             <SearchMultiDropdown
               label="Wyszukaj tagi"
               options={MOCK_TAGS}
@@ -252,13 +252,15 @@ const EventEditPage = ({ params }: { params: { slug: string } }) => {
               </div>
             </div>
             <div>
-              <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
-              <SearchMultiDropdown
-                label="Wyszukaj parametry"
-                options={Object.keys(MOCK_PARAMS)}
-                selectedOptions={paramsKeys}
-                setSelectedOptions={setParamsKeys}
-              />
+              <h3 className="mb-1font-semibold">Dodatkowe informacje:</h3>
+              <div className="mt-8">
+                <SearchMultiDropdown
+                  label="Wyszukaj parametry"
+                  options={Object.keys(MOCK_PARAMS)}
+                  selectedOptions={paramsKeys}
+                  setSelectedOptions={setParamsKeys}
+                />
+              </div>
               <div className="ml-5 mt-2 flex flex-col gap-1">
                 <h3 className="font-semibold">Wybrane parametry:</h3>
                 {paramsKeys?.map((key, idx) => (

Client/reasn-client/apps/web/app/events/layout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const EventLayout = ({
+const EventsLayout = ({
   children,
   params,
 }: {
@@ -11,10 +11,10 @@ const EventLayout = ({
   };
 }) => {
   return (
-    <section className="relative mx-auto flex min-h-screen w-[90%] justify-between py-10 sm:w-3/4">
+    <section className="relative mx-auto flex min-h-screen w-[90%] justify-between py-10 xl:w-3/4">
       {children}
     </section>
   );
 };
 
-export default EventLayout;
+export default EventsLayout;

Client/reasn-client/apps/web/app/events/new/page.tsx

@@ -8,11 +8,10 @@ import {
 } from "@reasn/ui/src/components/shared/form";
 import { ChangeEvent, useState } from "react";
 import { Clock, Location, Upload } from "@reasn/ui/src/icons";
-import { useRouter } from "next/navigation";
 import clsx from "clsx";
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 import { BaseInput } from "@reasn/ui/src/components/shared/form/Input";
-import { getStatusClass } from "@reasn/common/helpers/uiHelpers";
+import { getStatusClass } from "@reasn/common/src/helpers/uiHelpers";
 
 const MOCK_TAGS = [
   "abcd",
@@ -94,7 +93,7 @@ const EventAddPage = () => {
           >
             {status}
           </p>
-          <div className="flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
+          <div className="mt-8 flex flex-wrap gap-2 overflow-clip text-xs text-[#cacaca]">
             <SearchMultiDropdown
               label="Wyszukaj tagi"
               options={MOCK_TAGS}
@@ -184,12 +183,14 @@ const EventAddPage = () => {
             </div>
             <div>
               <h3 className="mb-1 font-semibold">Dodatkowe informacje:</h3>
-              <SearchMultiDropdown
-                label="Wyszukaj parametry"
-                options={Object.keys(MOCK_PARAMS)}
-                selectedOptions={paramsKeys}
-                setSelectedOptions={setParamsKeys}
-              />
+              <div className="mt-8">
+                <SearchMultiDropdown
+                  label="Wyszukaj parametry"
+                  options={Object.keys(MOCK_PARAMS)}
+                  selectedOptions={paramsKeys}
+                  setSelectedOptions={setParamsKeys}
+                />
+              </div>
               <div className="ml-5 mt-2 flex flex-col gap-1">
                 <h3 className="font-semibold">Wybrane parametry:</h3>
                 {!paramsKeys ||

Client/reasn-client/apps/web/app/events/page.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
+import { Card, CardVariant } from "@reasn/ui/src/components/shared";
+import {
+  FloatingInput,
+  SearchMultiDropdown,
+  SingleDropdown,
+} from "@reasn/ui/src/components/shared/form";
+import { ArrowLeft, ArrowRight, Clock } from "@reasn/ui/src/icons";
+import { useState } from "react";
+import { MOCK_TAGS } from "./[slug]/edit/page";
+import clsx from "clsx";
+
+const EventsPage = () => {
+  const [selectedSortBy, setSelectedSortBy] = useState<string>("tytuł");
+  const [selectedSortOrder, setSelectedSortOrder] = useState<string>("rosnąco");
+  const [selectedStatus, setSelectedStatus] = useState<string>("wszystkie");
+  const [selectViewMode, setSelectViewMode] = useState<string>("kafelki");
+  const [tags, setTags] = useState<string[]>(MOCK_TAGS.slice(0, 5));
+  const [selectedPage, setSelectedPage] = useState<number>(1);
+  const cardVariant =
+    selectViewMode === "kafelki" ? CardVariant.Tile : CardVariant.List;
+
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="absolute right-[-50%] top-[-10vh] z-0 h-[80vh] w-[200%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-10 blur-3xl duration-1000"></div>
+      <h1 className="h-[5rem] w-fit content-center bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold text-transparent">
+        Wydarzenia
+      </h1>
+      <div className="flex w-full flex-col justify-center gap-10 lg:flex-row">
+        <div className="flex h-full min-h-[50vh] w-full flex-col justify-start gap-8 rounded-lg bg-[#1E1F296d] p-5 backdrop-blur-lg xl:w-[25vw] xl:min-w-[25vw]">
+          <h3 className="text-2xl font-semibold">Filtry:</h3>
+          <div className="flex flex-row items-center gap-2">
+            <FloatingInput
+              label="Szukaj w tekście"
+              type="text"
+              name="searchText"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <Clock className="h-5 w-5 fill-slate-400" />
+            <FloatingInput
+              label="Data od"
+              type="date"
+              name="dateFrom"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <Clock className="h-5 w-5 fill-slate-400" />
+            <FloatingInput
+              label="Data do"
+              type="date"
+              name="dateTo"
+              className="grow"
+            />
+          </div>
+          <div className="flex flex-col items-start gap-2">
+            <h4>Status:</h4>
+            <SingleDropdown
+              label="Sortowanie"
+              options={["wszystkie", ...Object.values(EventStatus)]}
+              selectedOption={selectedStatus}
+              setSelectedOption={setSelectedStatus}
+            />
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <SearchMultiDropdown
+              label="Wyszukaj tagi"
+              options={MOCK_TAGS}
+              selectedOptions={tags}
+              setSelectedOptions={setTags}
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-5">
+          <div className="flex w-full flex-row items-center justify-start gap-10">
+            <div className="flex w-1/4 flex-row items-center gap-5">
+              <h3>widok:</h3>
+              <SingleDropdown
+                label="Widok"
+                options={["kafelki", "lista"]}
+                selectedOption={selectViewMode}
+                setSelectedOption={setSelectViewMode}
+              />
+            </div>
+            <div className="ml-auto flex w-1/2 flex-row items-center gap-5 self-end">
+              <h3>sortowanie:</h3>
+              <SingleDropdown
+                label="Sortowanie"
+                options={["rosnąco", "malejąco"]}
+                selectedOption={selectedSortOrder}
+                setSelectedOption={setSelectedSortOrder}
+              />
+              <SingleDropdown
+                label="Sortowanie"
+                options={["data od", "tytuł"]}
+                selectedOption={selectedSortBy}
+                setSelectedOption={setSelectedSortBy}
+              />
+            </div>
+          </div>
+          <div
+            className={clsx(
+              {
+                "xs:grid-cols-2 grid grid-cols-1 place-items-center gap-2 sm:grid-cols-3 sm:gap-10 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4":
+                  cardVariant === CardVariant.Tile,
+              },
+              { "flex flex-col gap-5": cardVariant === CardVariant.List },
+            )}
+          >
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((idx) => (
+              <Card variant={cardVariant} event="Abc" key={idx} />
+            ))}
+          </div>
+          <div className="flex w-full items-center justify-center gap-5">
+            {selectedPage > 1 && (
+              <ArrowLeft
+                className="h-10 w-10 cursor-pointer fill-slate-400 p-2"
+                onClick={() => setSelectedPage(selectedPage - 1)}
+              />
+            )}
+            {[1, 2, 3].map((idx) => (
+              <p
+                key={idx}
+                className={clsx("cursor-pointer px-2 py-1 text-lg", {
+                  "rounded-lg bg-[#4E4F75] text-black": selectedPage === idx,
+                })}
+              >
+                {idx}
+              </p>
+            ))}
+            {selectedPage < 3 && (
+              <ArrowRight
+                className="h-10 w-10 cursor-pointer fill-slate-400 p-2"
+                onClick={() => setSelectedPage(selectedPage + 1)}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventsPage;

Client/reasn-client/apps/web/tailwind.config.js

@@ -8,7 +8,11 @@ module.exports = {
     "../../packages/ui/src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "460px",
+      },
+    },
   },
   plugins: [],
 };

Client/reasn-client/packages/common/helpers/uiHelpers.ts → Client/reasn-client/packages/common/src/helpers/uiHelpers.ts

@@ -1,4 +1,4 @@
-import { EventStatus } from "@reasn/common/enums/modelsEnums";
+import { EventStatus } from "@reasn/common/src/enums/schemasEnums";
 
 export const getStatusClass = (status: EventStatus) => {
   switch (status) {

Client/reasn-client/packages/ui/src/components/shared/Card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { useRouter } from "next/navigation";
 

Client/reasn-client/packages/ui/src/components/shared/Comment.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import { CommentDto, CommentDtoMapper } from "@reasn/common/models/CommentDto";
+import {
+  CommentDto,
+  CommentDtoMapper,
+} from "@reasn/common/src/schemas/CommentDto";
 
 interface CommentProps {
   comment: CommentDto;

Client/reasn-client/packages/ui/src/components/shared/form/Dropdown.tsx

@@ -41,7 +41,7 @@ export const SearchMultiDropdown = (props: MultiDropdownProps) => {
   };
 
   return (
-    <div className="mt-8 flex w-full flex-col gap-2">
+    <div className="flex w-full flex-col gap-2">
       <FloatingInput
         type="text"
         label={label}
@@ -119,7 +119,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
     >
       <div
         className={clsx(
-          "flex w-full items-center justify-between p-2",
+          "pointer-events-none flex w-full items-center justify-between p-2",
           selectedOptionClass ?? "",
         )}
       >
@@ -132,7 +132,7 @@ export const SingleDropdown = (props: SingleDropdownProps) => {
       </div>
       <div
         className={clsx(
-          "absolute top-[100%] z-20 h-24 w-full flex-col justify-start overflow-auto rounded-b-lg bg-[#232327] text-xs",
+          "absolute top-[100%] z-20 max-h-24 w-full flex-col justify-start overflow-auto rounded-b-lg bg-[#232327] text-xs",
           { hidden: !isExpanded },
           { flex: isExpanded },
         )}

Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx

@@ -51,7 +51,7 @@ export const QuickFilters = () => {
           selected={selectedFilter === "Remote"}
         />
       </div>
-      <div className="grid grid-cols-1 place-items-center gap-10 p-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+      <div className="xs:grid-cols-2 grid grid-cols-1 place-items-center gap-2 p-10 sm:gap-10 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />
         <Card variant={CardVariant.Tile} event="Abc" />

Client/reasn-client/packages/ui/tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        xs: "460px",
+      },
+    },
   },
   plugins: [],
 };