-
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.
feat: implemented swiping for suggestions
- Loading branch information
Showing
9 changed files
with
320 additions
and
15 deletions.
There are no files selected for viewing
141 changes: 141 additions & 0 deletions
141
Client/reasn-client/apps/web/app/events/suggestions/page.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,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<number[]>([ | ||
| 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, | ||
| ]); | ||
| const currentCardRef = React.useRef<HTMLDivElement>(null); | ||
| const nextCardRef = React.useRef<HTMLDivElement>(null); | ||
| const [isAnimating, setIsAnimating] = useState(false); | ||
| const [action, setAction] = useState<"like" | "dislike" | "participate" | "">( | ||
| "", | ||
| ); | ||
|
|
||
| const handleDismissEvent = (e: MouseEvent<HTMLElement>) => { | ||
| 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<HTMLElement>) => { | ||
| 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<HTMLElement>) => { | ||
| 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 ( | ||
| <div className="relative flex w-full flex-col items-center justify-center"> | ||
| <div | ||
| className={clsx( | ||
| "absolute right-[-50%] top-[-25%] z-0 h-[50%] w-[200%] rounded-full blur-3xl", | ||
| "bg-blue-400 duration-1000", | ||
| { "opacity-30": action === "like" }, | ||
| { "opacity-10": action !== "like" }, | ||
| )} | ||
| ></div> | ||
| <div | ||
| className={clsx( | ||
| "absolute left-[-50%] top-[-25%] z-0 h-[100%] w-[100%] rounded-full blur-3xl", | ||
| "bg-red-400 duration-1000", | ||
| { "opacity-30": action === "dislike" }, | ||
| { "opacity-10": action !== "dislike" }, | ||
| )} | ||
| ></div> | ||
| <div | ||
| className={clsx( | ||
| "absolute right-[-50%] top-[-25%] z-0 h-[100%] w-[100%] rounded-full blur-3xl", | ||
| "bg-green-400 duration-1000", | ||
| { "opacity-30": action === "participate" }, | ||
| { "opacity-10": action !== "participate" }, | ||
| )} | ||
| ></div> | ||
| <div className="relative h-[60vh] w-full items-center justify-center"> | ||
| {events.map((val, idx) => ( | ||
| <div | ||
| key={val + idx} | ||
| className={clsx( | ||
| "absolute left-1/2 duration-500", | ||
| { "pointer-events-none": idx !== 0 }, | ||
| { "opacity-5 blur-sm": 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} | ||
| > | ||
| <Card variant={CardVariant.Swiping} event="Abc" /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="flex w-full items-center justify-center gap-10 lg:gap-24"> | ||
| <div | ||
| onClick={handleDismissEvent} | ||
| className={clsx( | ||
| "flex h-12 w-28 cursor-pointer items-center justify-center rounded-full", | ||
| "bg-red-500 bg-opacity-40 p-2 text-2xl font-semibold", | ||
| "group duration-300 hover:bg-red-700", | ||
| )} | ||
| > | ||
| <Dismiss className="h-5 w-5 fill-red-500 duration-300 group-hover:fill-black" /> | ||
| </div> | ||
| <div | ||
| onClick={handleLikeEvent} | ||
| className={clsx( | ||
| "flex h-12 w-16 cursor-pointer items-center justify-center rounded-full", | ||
| "bg-blue-400 bg-opacity-40 p-2 text-2xl font-semibold", | ||
| "group duration-300 hover:bg-blue-700", | ||
| )} | ||
| > | ||
| <Question className="h-5 w-5 fill-blue-400 duration-300 group-hover:fill-black" /> | ||
| </div> | ||
| <div | ||
| onClick={handleParticipateInEvent} | ||
| className={clsx( | ||
| "flex h-12 w-28 cursor-pointer items-center justify-center rounded-full", | ||
| "bg-green-500 bg-opacity-40 p-2 text-2xl font-semibold", | ||
| "group duration-300 hover:bg-green-700", | ||
| )} | ||
| > | ||
| <Add className="h-5 w-5 fill-green-500 duration-300 group-hover:fill-black" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default EventsSuggestionsPage; |
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
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
17 changes: 3 additions & 14 deletions
17
Client/reasn-client/packages/ui/src/components/shared/Comment.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
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,40 @@ | ||
| import React from "react"; | ||
| import { IconProps } from "./IconProps"; | ||
|
|
||
| export const Add = (props: IconProps) => { | ||
| const { className, colors, gradientTransform, onClick } = props; | ||
|
|
||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| className={className} | ||
| viewBox="0 0 24 24" | ||
| fill="url(#gradient1)" | ||
| onClick={onClick} | ||
| > | ||
| <defs> | ||
| <linearGradient | ||
| id="gradient1" | ||
| x1="0%" | ||
| y1="0%" | ||
| x2="100%" | ||
| y2="0%" | ||
| gradientTransform={gradientTransform} | ||
| > | ||
| {colors?.map((color, index) => ( | ||
| <stop | ||
| key={index} | ||
| offset={`${ | ||
| index + 1 < colors.length ? index * (100 / colors.length) : 100 | ||
| }%`} | ||
| style={{ stopColor: color, stopOpacity: 1 }} | ||
| /> | ||
| ))} | ||
| </linearGradient> | ||
| </defs> | ||
| <path d="M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z" /> | ||
| </svg> | ||
| ); | ||
| }; |
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,40 @@ | ||
| import React from "react"; | ||
| import { IconProps } from "./IconProps"; | ||
|
|
||
| export const Dismiss = (props: IconProps) => { | ||
| const { className, colors, gradientTransform, onClick } = props; | ||
|
|
||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| className={className} | ||
| viewBox="0 0 24 24" | ||
| fill="url(#gradient1)" | ||
| onClick={onClick} | ||
| > | ||
| <defs> | ||
| <linearGradient | ||
| id="gradient1" | ||
| x1="0%" | ||
| y1="0%" | ||
| x2="100%" | ||
| y2="0%" | ||
| gradientTransform={gradientTransform} | ||
| > | ||
| {colors?.map((color, index) => ( | ||
| <stop | ||
| key={index} | ||
| offset={`${ | ||
| index + 1 < colors.length ? index * (100 / colors.length) : 100 | ||
| }%`} | ||
| style={{ stopColor: color, stopOpacity: 1 }} | ||
| /> | ||
| ))} | ||
| </linearGradient> | ||
| </defs> | ||
| <path d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z" /> | ||
| </svg> | ||
| ); | ||
| }; |
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,40 @@ | ||
| import React from "react"; | ||
| import { IconProps } from "./IconProps"; | ||
|
|
||
| export const Question = (props: IconProps) => { | ||
| const { className, colors, gradientTransform, onClick } = props; | ||
|
|
||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| className={className} | ||
| viewBox="0 0 24 24" | ||
| fill="url(#gradient1)" | ||
| onClick={onClick} | ||
| > | ||
| <defs> | ||
| <linearGradient | ||
| id="gradient1" | ||
| x1="0%" | ||
| y1="0%" | ||
| x2="100%" | ||
| y2="0%" | ||
| gradientTransform={gradientTransform} | ||
| > | ||
| {colors?.map((color, index) => ( | ||
| <stop | ||
| key={index} | ||
| offset={`${ | ||
| index + 1 < colors.length ? index * (100 / colors.length) : 100 | ||
| }%`} | ||
| style={{ stopColor: color, stopOpacity: 1 }} | ||
| /> | ||
| ))} | ||
| </linearGradient> | ||
| </defs> | ||
| <path d="M12 4C9.238 4 7 6.238 7 9a1 1 0 0 0 2 0c0-1.658 1.342-3 3-3s3 1.342 3 3c0 .816-.199 1.294-.438 1.629-.262.365-.625.638-1.128.985l-.116.078c-.447.306-1.023.699-1.469 1.247-.527.648-.849 1.467-.849 2.561v.5a1 1 0 1 0 2 0v-.5c0-.656.178-1.024.4-1.299.257-.314.603-.552 1.114-.903l.053-.037c.496-.34 1.133-.786 1.62-1.468C16.7 11.081 17 10.183 17 9c0-2.762-2.238-5-5-5ZM12 21.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" /> | ||
| </svg> | ||
| ); | ||
| }; |
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