[RSN-63] - Implemented quick filters section

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>
   );
 }

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"
   },

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>

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>
+  );
+};

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";

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"

Server/ReasnAPI/ReasnAPI/Models/Enums/UserRole.cs

@@ -9,7 +9,7 @@ public enum UserRole
 
     [PgName("Organizer")]
     Organizer,
-    
+
     [PgName("Admin")]
     Admin
 }