From fdbe7bfc573b70a7ba14298a27dcd2d50351ebf9 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Fri, 7 Jun 2024 16:19:18 +0200
Subject: [PATCH] [RSN-63] - Implemented quick filters section (#49)

---
 Client/reasn-client/apps/web/app/page.tsx     |  5 +-
 Client/reasn-client/package.json              |  1 +
 .../packages/ui/src/components/Card.tsx       |  8 +-
 .../ui/src/components/main/QuickFilters.tsx   | 96 +++++++++++++++++++
 Client/reasn-client/packages/ui/src/index.tsx |  1 +
 Client/reasn-client/yarn.lock                 |  8 ++
 .../ReasnAPI/Models/Enums/UserRole.cs         |  2 +-
 7 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx

diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
index 47a2f97e..72c2b947 100644
--- a/Client/reasn-client/apps/web/app/page.tsx
+++ b/Client/reasn-client/apps/web/app/page.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { HeroSection } from "@reasn/ui/src";
+import { HeroSection, QuickFilters } from "@reasn/ui/src";
 
 export default function Web() {
   return (
-    <div className="bg-[#161618] text-white">
+    <div className="min-h-screen bg-[#161618] text-white">
       <HeroSection />
+      <QuickFilters />
     </div>
   );
 }
diff --git a/Client/reasn-client/package.json b/Client/reasn-client/package.json
index 322bd31c..6f04eabe 100644
--- a/Client/reasn-client/package.json
+++ b/Client/reasn-client/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3"
   },
diff --git a/Client/reasn-client/packages/ui/src/components/Card.tsx b/Client/reasn-client/packages/ui/src/components/Card.tsx
index 9ceabaf5..e00068bd 100644
--- a/Client/reasn-client/packages/ui/src/components/Card.tsx
+++ b/Client/reasn-client/packages/ui/src/components/Card.tsx
@@ -58,7 +58,7 @@ const CardTile = ({ event }: { event: string }) => {
       <img
         src={MOCK_IMG_URL}
         alt=""
-        className="absolute left-0 top-0 -z-10 h-full object-cover"
+        className="absolute left-0 top-0 h-full object-cover"
       />
       <div className="relative flex h-1/2 w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex flex-wrap gap-1 text-xs text-[#cacaca]">
@@ -86,11 +86,7 @@ const CardTile = ({ event }: { event: string }) => {
 const CardList = ({ event }: { event: string }) => {
   return (
     <div className="group relative h-36 w-full overflow-hidden rounded-3xl">
-      <img
-        src={MOCK_IMG_URL}
-        alt=""
-        className="absolute left-0 top-0 -z-10 w-full"
-      />
+      <img src={MOCK_IMG_URL} alt="" className="absolute left-0 top-0 w-full" />
       <div className="relative flex h-full w-2/3 flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
diff --git a/Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx b/Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx
new file mode 100644
index 00000000..dca663a0
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx
@@ -0,0 +1,96 @@
+import clsx from "clsx";
+import React, { useState } from "react";
+import { Card, CardVariant } from "../Card";
+
+interface QuickFiltersButtonProps {
+  title: string;
+  selected?: boolean;
+  onClick: () => void;
+}
+
+export const QuickFilters = () => {
+  const [selectedFilter, setSelectedFilter] = useState("Today");
+
+  return (
+    <div>
+      <div className="flex w-full gap-10 overflow-x-clip bg-[#1E1F29] px-10 py-8">
+        <QuickFilterButton
+          title="Dziś"
+          onClick={() => setSelectedFilter("Today")}
+          selected={selectedFilter === "Today"}
+        />
+        <QuickFilterButton
+          title="Jutro"
+          onClick={() => setSelectedFilter("Tommorow")}
+          selected={selectedFilter === "Tommorow"}
+        />
+        <QuickFilterButton
+          title="Rozpoczęte"
+          onClick={() => setSelectedFilter("In Progress")}
+          selected={selectedFilter === "In Progress"}
+        />
+        <QuickFilterButton
+          title="W tym tygodniu"
+          onClick={() => setSelectedFilter("This Week")}
+          selected={selectedFilter === "This Week"}
+        />
+        <QuickFilterButton
+          title="Wrocław"
+          onClick={() => setSelectedFilter("Wro")}
+          selected={selectedFilter === "Wro"}
+        />
+        <QuickFilterButton
+          title="Kraków"
+          onClick={() => setSelectedFilter("Krk")}
+          selected={selectedFilter === "Krk"}
+        />
+        <QuickFilterButton
+          title="Zdalne"
+          onClick={() => setSelectedFilter("Remote")}
+          selected={selectedFilter === "Remote"}
+        />
+      </div>
+      <div className="flex flex-wrap gap-10 p-10">
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+        <Card variant={CardVariant.Tile} event="Abc" />
+      </div>
+      <div className="flex justify-center py-10">
+        <button className="w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2">
+          więcej
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const QuickFilterButton = (props: QuickFiltersButtonProps) => {
+  const { title, onClick, selected } = props;
+  return (
+    <div className="min-w-36 rounded-2xl bg-gradient-to-r from-[#ff6363] to-[#1e35ff] p-px text-white">
+      <button
+        onClick={onClick}
+        className={clsx(
+          "h-full w-full rounded-2xl px-4 py-2",
+          { "bg-gradient-to-r from-[#914343] to-[#0c1db7]": selected },
+          { "bg-[#1E1F29] hover:bg-[#2E2F3E]": !selected },
+        )}
+      >
+        {title}
+      </button>
+    </div>
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/index.tsx b/Client/reasn-client/packages/ui/src/index.tsx
index 59314924..01ce4111 100644
--- a/Client/reasn-client/packages/ui/src/index.tsx
+++ b/Client/reasn-client/packages/ui/src/index.tsx
@@ -1,3 +1,4 @@
 export { Button, type ButtonProps } from "./button";
 export { Card, type CardProps, CardVariant } from "./components/Card";
 export { HeroSection } from "./components/main/HeroSection";
+export { QuickFilters } from "./components/main/QuickFilters";
diff --git a/Client/reasn-client/yarn.lock b/Client/reasn-client/yarn.lock
index 7a051d7d..78c8ffd3 100644
--- a/Client/reasn-client/yarn.lock
+++ b/Client/reasn-client/yarn.lock
@@ -6776,6 +6776,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -14749,6 +14756,7 @@ __metadata:
     "@types/jest": "npm:^29.5.12"
     "@types/node": "npm:^20.12.11"
     autoprefixer: "npm:^10.4.19"
+    clsx: "npm:^2.1.1"
     husky: "npm:^9.0.11"
     jest: "npm:^29.7.0"
     jest-fetch-mock: "npm:^3.0.3"
diff --git a/Server/ReasnAPI/ReasnAPI/Models/Enums/UserRole.cs b/Server/ReasnAPI/ReasnAPI/Models/Enums/UserRole.cs
index 5967afa9..edb13736 100644
--- a/Server/ReasnAPI/ReasnAPI/Models/Enums/UserRole.cs
+++ b/Server/ReasnAPI/ReasnAPI/Models/Enums/UserRole.cs
@@ -9,7 +9,7 @@ public enum UserRole
 
     [PgName("Organizer")]
     Organizer,
-    
+
     [PgName("Admin")]
     Admin
 }
\ No newline at end of file