-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RSN-63] - Implemented quick filters section (#49)
- Loading branch information
Showing
7 changed files
with
112 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
Client/reasn-client/packages/ui/src/components/main/QuickFilters.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ public enum UserRole | |
|
|
||
| [PgName("Organizer")] | ||
| Organizer, | ||
|
|
||
| [PgName("Admin")] | ||
| Admin | ||
| } | ||