diff --git a/Client/reasn-client/apps/web/app/events/suggestions/page.tsx b/Client/reasn-client/apps/web/app/events/suggestions/page.tsx new file mode 100644 index 00000000..37086ef5 --- /dev/null +++ b/Client/reasn-client/apps/web/app/events/suggestions/page.tsx @@ -0,0 +1,141 @@ +"use client"; + +import { Card, CardVariant } from "@reasn/ui/src/components/shared"; +import { Add, Dismiss, Question } from "@reasn/ui/src/icons"; +import clsx from "clsx"; +import React, { MouseEvent, useState } from "react"; + +const EventsSuggestionsPage = () => { + const [events, setEvents] = useState([ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, + ]); + const currentCardRef = React.useRef(null); + const nextCardRef = React.useRef(null); + const [isAnimating, setIsAnimating] = useState(false); + const [action, setAction] = useState<"like" | "dislike" | "participate" | "">( + "", + ); + + const handleDismissEvent = (e: MouseEvent) => { + currentCardRef.current?.classList.add("animate-fadeOutLeft"); + setIsAnimating(true); + setAction("dislike"); + setTimeout(() => { + currentCardRef.current?.classList.remove("animate-fadeOutLeft"); + setEvents((prev) => prev.slice(1)); + setIsAnimating(false); + setAction(""); + }, 500); + e.stopPropagation(); + }; + + const handleLikeEvent = (e: MouseEvent) => { + currentCardRef.current?.classList.add("animate-fadeOutDown"); + setIsAnimating(true); + setAction("like"); + setTimeout(() => { + currentCardRef.current?.classList.remove("animate-fadeOutDown"); + setEvents((prev) => prev.slice(1)); + setIsAnimating(false); + setAction(""); + }, 500); + e.stopPropagation(); + }; + + const handleParticipateInEvent = (e: MouseEvent) => { + currentCardRef.current?.classList.add("animate-fadeOutRight"); + setIsAnimating(true); + setAction("participate"); + setTimeout(() => { + currentCardRef.current?.classList.remove("animate-fadeOutRight"); + setEvents((prev) => prev.slice(1)); + setIsAnimating(false); + setAction(""); + }, 500); + e.stopPropagation(); + }; + + return ( +
+
+
+
+
+ {events.map((val, idx) => ( +
1 || (idx === 1 && !isAnimating) }, + { "opacity-1 blur-none": idx === 1 && isAnimating }, + { "opacity-1 pointer-events-auto": idx === 0 }, + )} + style={{ + transform: `translate(-50%, ${idx * 1.5}%)`, + zIndex: `${11 - idx}`, + }} + ref={idx === 0 ? currentCardRef : idx === 1 ? nextCardRef : null} + > + +
+ ))} +
+
+
+ +
+
+ +
+
+ +
+
+
+ ); +}; + +export default EventsSuggestionsPage; diff --git a/Client/reasn-client/apps/web/middleware.ts b/Client/reasn-client/apps/web/middleware.ts index 1b59c67f..e51a1c54 100644 --- a/Client/reasn-client/apps/web/middleware.ts +++ b/Client/reasn-client/apps/web/middleware.ts @@ -24,7 +24,7 @@ export const middleware = (req: NextRequest) => { if (path.startsWith("/events") && session.user?.role === UserRole.USER) { return NextResponse.redirect(new URL("/events", req.url)); - } + } }; export const config = { diff --git a/Client/reasn-client/apps/web/tailwind.config.js b/Client/reasn-client/apps/web/tailwind.config.js index 6ca42768..d7a84ba7 100644 --- a/Client/reasn-client/apps/web/tailwind.config.js +++ b/Client/reasn-client/apps/web/tailwind.config.js @@ -12,6 +12,28 @@ module.exports = { screens: { xs: "460px", }, + keyframes: { + fadeOutRight: { + "0%": { transform: "translateX(-50%) rotate(0deg)", opacity: 1 }, + "100%": { transform: "translateX(100%) rotate(30deg)", opacity: 0 }, + }, + fadeOutLeft: { + "0%": { transform: "translateX(-50%) rotate(0deg)", opacity: 1 }, + "100%": { transform: "translateX(-150%) rotate(-30deg)", opacity: 0 }, + }, + fadeOutDown: { + "0%": { transform: "translateX(-50%) translateY(0%)", opacity: 1 }, + "100%": { + transform: "translateX(-50%) translateY(-100%)", + opacity: 0, + }, + }, + }, + animation: { + fadeOutRight: "fadeOutRight 0.5s ease-in-out forwards", + fadeOutLeft: "fadeOutLeft 0.5s ease-in-out forwards", + fadeOutDown: "fadeOutDown 0.5s ease-in-out forwards", + }, }, }, plugins: [], diff --git a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx index 73a92e01..af29026b 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx @@ -10,6 +10,7 @@ export enum CardVariant { Big, Tile, List, + Swiping, } export interface CardProps { @@ -31,6 +32,7 @@ export const Card = (props: Readonly) => { {variant === CardVariant.Big && } {variant === CardVariant.Tile && } {variant === CardVariant.List && } + {variant === CardVariant.Swiping && } ); }; @@ -145,3 +147,31 @@ const CardList = ({ event }: { event: string }) => { ); }; + +const CardSwiping = ({ event }: { event: string }) => { + return ( +
+ +
+
+

#abcd

+

#abcd

+

#abcd

+

#abcd

+
+

+ Koncert fagaty na PWR w C-16 +

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde + quisquam maiores doloremque molestiae ducimus, distinctio accusamus + sed voluptatem eius itaque. +

+
+
+ ); +}; diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx index a979009e..cd83ebc3 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx @@ -1,26 +1,15 @@ import React from "react"; -import { - CommentDto, - CommentDtoMapper, -} from "@reasn/common/src/schemas/CommentDto"; import { ButtonBase, FloatingTextarea } from "./form"; interface CommentProps { - comment?: CommentDto; + comment?: string; } export const Comment = (props: CommentProps) => { - const comment = CommentDtoMapper.fromObject({ - EventId: 1, - Content: - "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta quidem sapiente odit maxime. Officiis, error laborum. Voluptatem quibusdam mollitia possimus?", - CreatedAt: new Date(), - UserId: 1, - }); - + const { comment } = props; return (
-

{comment.Content}

+

{comment}

{ + const { className, colors, gradientTransform, onClick } = props; + + return ( + + + + {colors?.map((color, index) => ( + + ))} + + + + + ); +}; diff --git a/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx b/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx new file mode 100644 index 00000000..e99a0023 --- /dev/null +++ b/Client/reasn-client/packages/ui/src/icons/Dismiss.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { IconProps } from "./IconProps"; + +export const Dismiss = (props: IconProps) => { + const { className, colors, gradientTransform, onClick } = props; + + return ( + + + + {colors?.map((color, index) => ( + + ))} + + + + + ); +}; diff --git a/Client/reasn-client/packages/ui/src/icons/Question.tsx b/Client/reasn-client/packages/ui/src/icons/Question.tsx new file mode 100644 index 00000000..fb39d31e --- /dev/null +++ b/Client/reasn-client/packages/ui/src/icons/Question.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { IconProps } from "./IconProps"; + +export const Question = (props: IconProps) => { + const { className, colors, gradientTransform, onClick } = props; + + return ( + + + + {colors?.map((color, index) => ( + + ))} + + + + + ); +}; diff --git a/Client/reasn-client/packages/ui/src/icons/index.tsx b/Client/reasn-client/packages/ui/src/icons/index.tsx index 5cc581b4..b58c57dc 100644 --- a/Client/reasn-client/packages/ui/src/icons/index.tsx +++ b/Client/reasn-client/packages/ui/src/icons/index.tsx @@ -8,3 +8,6 @@ export { ArrowRight } from "./ArrowRight"; export { Upload } from "./Upload"; export { CaretDown } from "./CaretDown"; export { CaretUp } from "./CaretUp"; +export { Add } from "./Add"; +export { Question } from "./Question"; +export { Dismiss } from "./Dismiss";