diff --git a/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx new file mode 100644 index 00000000..963aeb45 --- /dev/null +++ b/Client/reasn-client/apps/web/app/events/[slug]/edit/page.tsx @@ -0,0 +1,359 @@ +"use client"; + +import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card"; +import { + ButtonBase, + FloatingInput, + FloatingTextarea, + SearchMultiDropdown, + SingleDropdown, +} from "@reasn/ui/src/components/shared/form"; +import { ChangeEvent, useState } from "react"; +import { ArrowLeft, Clock, Location, Upload } from "@reasn/ui/src/icons"; +import { useRouter } from "next/navigation"; +import clsx from "clsx"; +import { EventStatus } from "@reasn/common/enums/modelsEnums"; +import { BaseInput } from "@reasn/ui/src/components/shared/form/Input"; +import { getStatusClass } from "@reasn/common/helpers/uiHelpers"; + +const IMAGES = [ + "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + MOCK_IMG_URL, + "https://images.pexels.com/photos/19867588/pexels-photo-19867588/free-photo-of-happy-pongal.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/6297150/pexels-photo-6297150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/1820563/pexels-photo-1820563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", +]; + +const MOCK_TAGS = [ + "abcd", + "efgh", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", + "dada", + "vvvv", + "bgbfgb", + "nfnfnf", + "mmjmjm", + ",lkyt", + "t554", + "fsdfs", + "hhhhh", + "fsf", + "u234ghhvwx", + "nh", + "sdfsf4", + "ses5", +]; + +const MOCK_PARAMS: { [key: string]: string } = { + abcd: "efgh", + ijkl: "mnop", + qrst: "uvwx", + yzab: "cdef", + ghij: "ijkl", + mnop: "qrst", + uvwx: "yzab", + cdef: "ghij", +}; + +const EventEditPage = ({ params }: { params: { slug: string } }) => { + const { slug } = params; + const router = useRouter(); + const [status, setStatus] = useState(EventStatus.REJECTED); + + const admin = slug === "edit"; + + const [imgs, setImgs] = useState( + IMAGES.sort(() => Math.random() - 0.5).slice(0, 3), + ); + + const [tags, setTags] = useState(MOCK_TAGS.slice(0, 5)); + + const [paramsKeys, setParamsKeys] = useState( + Object.keys(MOCK_PARAMS).slice(0, 3), + ); + + const handleRedirect = () => { + let conf = confirm("Czy na pewno chcesz wyjść bez zapisywania zmian?"); + + if (conf) { + router.push(`/events/${slug}`); + } + }; + + const handleImageUpload = ( + event: ChangeEvent, + idx: number, + ) => { + const file = event?.target?.files?.[0]; + if (file) { + const fileURL = URL.createObjectURL(file); + setImgs((prevImgs) => { + const newImgs = [...prevImgs]; + newImgs[idx] = fileURL; + return newImgs; + }); + } + }; + + return ( +
+
+
+
+ +

cofnij do wydarzenia

+
+
+ {}} className="w-full" /> +
+
+
+
+ {admin ? ( + + ) : ( +
+

+ {status} +

+ {}} + className="grow from-red-400 to-red-700 font-semibold text-black" + /> +
+ )} +
+ +
+

Wybrane tagi:

+ {tags.map((tag, idx) => ( +

+ {tag} +

+ ))} +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ +
+ + + + +
+
+
+

Dodatkowe informacje:

+ +
+

Wybrane parametry:

+ {paramsKeys?.map((key, idx) => ( +
+ + {key}: + + +
+ ))} +
+
+
+
+
+ avatar +
+

Nazwa organizatora

+
+
+

utworzono: 13 czerwca 2024r. 12:25

+
+
+
+
+ {[0, 1, 2, 3].map((idx) => ( + // eslint-disable-next-line @next/next/no-img-element +
+
{ + const element = document?.querySelector( + `input[name="img-${idx}"]`, + ); + if (element instanceof HTMLInputElement) { + element.click(); + } + }} + className="absolute z-20 flex h-full w-full cursor-pointer items-center justify-center bg-black opacity-0 duration-300 group-hover:opacity-50" + > + +
+ handleImageUpload(e, idx)} + /> + {imgs[idx] ? ( + + ) : ( +
+ )} +
+ ))} +
+
+
+ +
+
+
+
+
+ ); +}; + +export default EventEditPage; diff --git a/Client/reasn-client/apps/web/app/events/[slug]/page.tsx b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx new file mode 100644 index 00000000..deb47f14 --- /dev/null +++ b/Client/reasn-client/apps/web/app/events/[slug]/page.tsx @@ -0,0 +1,288 @@ +"use client"; + +import { MOCK_IMG_URL } from "@reasn/ui/src/components/shared/Card"; +import { ButtonBase } from "@reasn/ui/src/components/shared/form"; +import { Comment } from "@reasn/ui/src/components/shared/Comment"; +import { useEffect, useRef, useState } from "react"; +import { + ArrowLeft, + ArrowRight, + Clock, + Location, + QuestionCircle, + TickCircle, +} from "@reasn/ui/src/icons"; +import { useRouter } from "next/navigation"; + +import useColorWorker from "@reasn/common/hooks/useColorWorker"; + +const IMAGES = [ + "https://images.pexels.com/photos/19012544/pexels-photo-19012544/free-photo-of-storm.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + MOCK_IMG_URL, + "https://images.pexels.com/photos/19867588/pexels-photo-19867588/free-photo-of-happy-pongal.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/6297150/pexels-photo-6297150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/1820563/pexels-photo-1820563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + "https://images.pexels.com/photos/54332/currant-immature-bush-berry-54332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", +]; + +const MOCK_TAGS = [ + "abcd", + "efgh", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", +]; + +const MOCK_PARAMS: { [key: string]: string } = { + abcd: "efgh", + ijkl: "mnop", + qrst: "uvwx", + yzab: "cdef", + ghij: "ijkl", + mnop: "qrst", + uvwx: "yzab", + cdef: "ghij", +}; + +const EventPage = ({ params }: { params: { slug: string } }) => { + const { slug } = params; + const imgRef = useRef(null); + const canvasRef = useRef(null); + const [gradient, setGradient] = useState(""); + const editPage = slug === "edit"; + const router = useRouter(); + + const [imgs, setImgs] = useState(IMAGES); + + const [currentImageIdx, setCurrentImageIdx] = useState(0); + + const [imageData, setImageData] = useState(); + + useEffect(() => { + const img = imgRef.current; + const canvas = canvasRef.current; + + if (!img || !canvas) { + return; + } + + const ctx = canvas.getContext("2d"); + + if (!ctx) { + return; + } + + img.crossOrigin = "Anonymous"; + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + + ctx.drawImage(img, 0, 0, img.width, img.height); + + const imageData = ctx.getImageData( + 0, + 0, + canvas.width, + canvas.height, + ).data; + setImageData(imageData); + }; + }, [imgRef.current]); + + const dominantColors = useColorWorker(imageData); + + useEffect(() => { + if (dominantColors.length === 0) return; + + const dominantColorsRgb = dominantColors.map((color: string) => { + const [r, g, b] = color.split(",").map(Number); + return `rgb(${r}, ${g}, ${b})`; + }); + + setGradient(`linear-gradient(to right, ${dominantColorsRgb.join(", ")})`); + }, [dominantColors]); + + const handleRedirect = () => { + router.push(`/events/${slug}/edit`); + }; + + return ( +
+
+
+
+

DO AKCEPTACJI

+
+ {MOCK_TAGS.map((tag, idx) => ( +

+ {tag} +

+ ))} +
+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque, + nam. +

+
+
+ +

12 grudnia 2024r. 12:00 - 13 grudnia 2024r. 23:48

+
+
+ +

Wrocław, C-16 Politechnika Wrocławska, Polska

+
+
+
+ + 60 zainteresowanych +
+
+ + 20 bierze udział +
+
+
+

Dodatkowe informacje:

+
+ {MOCK_PARAMS && + Object.keys(MOCK_PARAMS).map((key, idx) => ( +

+ + {key}: + + {MOCK_PARAMS[key]} +

+ ))} +
+
+
+
+
+ avatar +
+

Nazwa organizatora

+
+
+

utworzono: 13 czerwca 2024r. 12:25

+

ostatnia edycja: 13 czerwca 2024r. 12:48

+
+
+
+
+
+ {imgs.map((img, idx) => ( + // eslint-disable-next-line @next/next/no-img-element +
+ +
+ ))} +
+ {currentImageIdx > 0 && ( + setCurrentImageIdx(currentImageIdx - 1)} + className="absolute left-5 top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2" + /> + )} + {currentImageIdx < imgs.length - 1 && ( + setCurrentImageIdx((idx) => idx + 1)} + className="absolute right-5 top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2" + /> + )} + +
+
+ {editPage ? ( + + ) : ( + <> + {}} + className="w-full font-semibold text-orange-400" + background="hover:bg-[#0f0f0f] bg-black" + /> + {}} + className="w-full font-semibold text-green-400" + background="hover:bg-[#0f0f0f] bg-black" + /> + + )} +
+
+

Opis:

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Necessitatibus aspernatur quibusdam saepe enim totam suscipit + tempore facere aut id sint ratione placeat, magni ipsa quo + assumenda odit atque omnis, sequi, impedit reiciendis. Provident + nobis quaerat maxime beatae sapiente. Placeat, obcaecati + doloremque laboriosam cumque, praesentium necessitatibus itaque + consequuntur ex dignissimos quam atque beatae impedit temporibus + dicta ab magnam dolorum corrupti sit enim! Ipsa, omnis nisi. +

+
+
+

Komentarze:

+
+ + + + + + +
+
+
+
+
+ ); +}; + +export default EventPage; diff --git a/Client/reasn-client/apps/web/app/events/layout.tsx b/Client/reasn-client/apps/web/app/events/layout.tsx new file mode 100644 index 00000000..c9ac1139 --- /dev/null +++ b/Client/reasn-client/apps/web/app/events/layout.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +const EventLayout = ({ + children, + params, +}: { + children: React.ReactNode; + params: { + tag: string; + item: string; + }; +}) => { + return ( +
+ {children} +
+ ); +}; + +export default EventLayout; diff --git a/Client/reasn-client/apps/web/app/events/new/page.tsx b/Client/reasn-client/apps/web/app/events/new/page.tsx new file mode 100644 index 00000000..f21f820b --- /dev/null +++ b/Client/reasn-client/apps/web/app/events/new/page.tsx @@ -0,0 +1,272 @@ +"use client"; + +import { + ButtonBase, + FloatingInput, + FloatingTextarea, + SearchMultiDropdown, +} from "@reasn/ui/src/components/shared/form"; +import { ChangeEvent, useState } from "react"; +import { Clock, Location, Upload } from "@reasn/ui/src/icons"; +import { useRouter } from "next/navigation"; +import clsx from "clsx"; +import { EventStatus } from "@reasn/common/enums/modelsEnums"; +import { BaseInput } from "@reasn/ui/src/components/shared/form/Input"; +import { getStatusClass } from "@reasn/common/helpers/uiHelpers"; + +const MOCK_TAGS = [ + "abcd", + "efgh", + "ijkl", + "mnop", + "qrst", + "uvwx", + "yzab", + "cdef", + "ghij", + "dada", + "vvvv", + "bgbfgb", + "nfnfnf", + "mmjmjm", + ",lkyt", + "t554", + "fsdfs", + "hhhhh", + "fsf", + "u234ghhvwx", + "nh", + "sdfsf4", + "ses5", +]; + +const MOCK_PARAMS: { [key: string]: string } = { + abcd: "efgh", + ijkl: "mnop", + qrst: "uvwx", + yzab: "cdef", + ghij: "ijkl", + mnop: "qrst", + uvwx: "yzab", + cdef: "ghij", +}; + +const EventAddPage = () => { + const [status, setStatus] = useState(EventStatus.PENDING_APPROVAL); + + const [imgs, setImgs] = useState([]); + + const [tags, setTags] = useState([]); + + const [paramsKeys, setParamsKeys] = useState([]); + + const handleImageUpload = ( + event: ChangeEvent, + idx: number, + ) => { + const file = event?.target?.files?.[0]; + if (file) { + const fileURL = URL.createObjectURL(file); + setImgs((prevImgs) => { + const newImgs = [...prevImgs]; + newImgs[idx] = fileURL; + return newImgs; + }); + } + }; + + return ( +
+
+
+
+

+ {status} +

+
+ +
+

Wybrane tagi:

+ {!tags || + (tags.length === 0 &&

brak

)} + {tags.map((tag, idx) => ( +

+ {tag} +

+ ))} +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ +
+ + + + +
+
+
+

Dodatkowe informacje:

+ +
+

Wybrane parametry:

+ {!paramsKeys || + (paramsKeys.length === 0 && ( +

brak

+ ))} + {paramsKeys?.map((key, idx) => ( +
+ + {key}: + + +
+ ))} +
+
+
+
+
+
+ {[0, 1, 2, 3].map((idx) => ( + // eslint-disable-next-line @next/next/no-img-element +
+
{ + const element = document?.querySelector( + `input[name="img-${idx}"]`, + ); + if (element instanceof HTMLInputElement) { + element.click(); + } + }} + className="absolute z-20 flex h-full w-full cursor-pointer items-center justify-center bg-black opacity-0 duration-300 group-hover:opacity-50" + > + +
+ handleImageUpload(e, idx)} + /> + {imgs[idx] ? ( + + ) : ( +
+ )} +
+ ))} +
+
+
+ +
+
+ {}} className="w-full" /> +
+
+
+
+
+ ); +}; + +export default EventAddPage; diff --git a/Client/reasn-client/apps/web/app/login/layout.tsx b/Client/reasn-client/apps/web/app/login/layout.tsx index cdc8ea08..0534a232 100644 --- a/Client/reasn-client/apps/web/app/login/layout.tsx +++ b/Client/reasn-client/apps/web/app/login/layout.tsx @@ -11,7 +11,7 @@ const LoginLayout = ({ }; }) => { return ( -
+
{children}
); diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx index c4150fd4..c9e0f136 100644 --- a/Client/reasn-client/apps/web/app/login/page.tsx +++ b/Client/reasn-client/apps/web/app/login/page.tsx @@ -17,8 +17,8 @@ const LoginPage = () => { return ( <> -
-
+
+
@@ -29,8 +29,8 @@ const LoginPage = () => {
-
-

+

+

miło, że do nas wracasz

diff --git a/Client/reasn-client/apps/web/app/register/layout.tsx b/Client/reasn-client/apps/web/app/register/layout.tsx index 2bff494a..c76dceea 100644 --- a/Client/reasn-client/apps/web/app/register/layout.tsx +++ b/Client/reasn-client/apps/web/app/register/layout.tsx @@ -11,7 +11,7 @@ const RegisterLayout = ({ }; }) => { return ( -
+
{children}
); diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx index 2b5807b9..be2f7ce2 100644 --- a/Client/reasn-client/apps/web/app/register/organizer/page.tsx +++ b/Client/reasn-client/apps/web/app/register/organizer/page.tsx @@ -17,7 +17,7 @@ const RegisterOrganizer = () => { return ( <> -
+
{currentStep === 1 && ( <> @@ -49,14 +49,14 @@ const RegisterOrganizer = () => { )}
-
+
{currentStep === 1 && ( -

+

to jak, zorganizujesz nam coś?

)} {currentStep === 2 && ( -

+

gdzie możemy cię znaleźć?

)} diff --git a/Client/reasn-client/apps/web/app/register/page.tsx b/Client/reasn-client/apps/web/app/register/page.tsx index 05c14ae0..b7d2b046 100644 --- a/Client/reasn-client/apps/web/app/register/page.tsx +++ b/Client/reasn-client/apps/web/app/register/page.tsx @@ -9,9 +9,9 @@ const RegisterMiddleware = () => { return (

kim jesteś?

-
+
router.push("/register/organizer")} >
@@ -20,10 +20,10 @@ const RegisterMiddleware = () => {

router.push("/register/user")} > -

+

Uczestnik

diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx index 79131460..78431412 100644 --- a/Client/reasn-client/apps/web/app/register/user/page.tsx +++ b/Client/reasn-client/apps/web/app/register/user/page.tsx @@ -17,7 +17,7 @@ const RegisterUser = () => { return ( <> -
+
{currentStep === 1 && ( <> @@ -49,14 +49,14 @@ const RegisterUser = () => { )}
-
+
{currentStep === 1 && ( -

+

znalazłeś już swój powód do spotkań?

)} {currentStep === 2 && ( -

+

gdzie powinniśmy cię szukać?

)} diff --git a/Client/reasn-client/jest.config.ts b/Client/reasn-client/jest.config.ts index 37743456..c2672858 100644 --- a/Client/reasn-client/jest.config.ts +++ b/Client/reasn-client/jest.config.ts @@ -94,6 +94,7 @@ const config: JestConfigWithTsJest = { "^@reasn/common/interfaces/(.*)$": "/packages/common/interfaces/$1", "^@reasn/common/errors/(.*)$": "/packages/common/errors/$1", + "^@reasn/common/hooks/(.*)$": "/packages/common/hooks/$1", }, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader diff --git a/Client/reasn-client/packages/common/helpers/uiHelpers.ts b/Client/reasn-client/packages/common/helpers/uiHelpers.ts new file mode 100644 index 00000000..9978becc --- /dev/null +++ b/Client/reasn-client/packages/common/helpers/uiHelpers.ts @@ -0,0 +1,20 @@ +import { EventStatus } from "@reasn/common/enums/modelsEnums"; + +export const getStatusClass = (status: EventStatus) => { + switch (status) { + case EventStatus.APPROVED: + return "from-green-400 text-green-400"; + case EventStatus.PENDING_APPROVAL: + return "from-orange-400 text-orange-400"; + case EventStatus.REJECTED: + return "from-red-400 text-red-400"; + case EventStatus.COMPLETED: + return "from-blue-400 text-blue-400"; + case EventStatus.ONGOING: + return "from-yellow-400 text-yellow-400"; + case EventStatus.CANCELLED: + return "from-gray-400 text-gray-400"; + default: + return "from-gray-400 text-gray-400"; + } +}; diff --git a/Client/reasn-client/packages/common/hooks/useColorWorker.ts b/Client/reasn-client/packages/common/hooks/useColorWorker.ts new file mode 100644 index 00000000..2ea3454e --- /dev/null +++ b/Client/reasn-client/packages/common/hooks/useColorWorker.ts @@ -0,0 +1,28 @@ +import { useState, useEffect } from "react"; + +function useColorWorker(imageData: Uint8ClampedArray | null | undefined) { + const [dominantColors, setDominantColors] = useState([]); + + useEffect(() => { + if (!imageData) return; + + const worker = new Worker( + new URL("../workers/colorWorker.ts", import.meta.url), + ); + + worker.onmessage = (event) => { + setDominantColors(event.data.dominantColors); + worker.terminate(); + }; + + worker.postMessage({ imageData }); + + return () => { + worker.terminate(); + }; + }, [imageData]); + + return dominantColors; +} + +export default useColorWorker; diff --git a/Client/reasn-client/packages/common/workers/colorWorker.ts b/Client/reasn-client/packages/common/workers/colorWorker.ts new file mode 100644 index 00000000..c2347685 --- /dev/null +++ b/Client/reasn-client/packages/common/workers/colorWorker.ts @@ -0,0 +1,56 @@ +self.onmessage = function (event) { + const { imageData } = event.data; + + const colorDistance = (color1: string, color2: string): number => { + const [r1, g1, b1] = color1.split(",").map(Number); + const [r2, g2, b2] = color2.split(",").map(Number); + return Math.sqrt((r1 - r2) ** 2 + (g1 - g2) ** 2 + (b1 - b2) ** 2); + }; + + const colorCount: { [key: string]: number } = {}; + const incrementValue = 120; + + for (let i = 0; i < imageData.length; i += incrementValue) { + const r = imageData[i]; + const g = imageData[i + 1]; + const b = imageData[i + 2]; + + const color = `${r},${g},${b}`; + if (colorCount[color]) { + colorCount[color]++; + } else { + colorCount[color] = 1; + } + } + + let sortedColors = Object.entries(colorCount).sort( + ([, countA], [, countB]) => countB - countA, + ); + + sortedColors = sortedColors.filter(([color]) => { + const [r, g, b] = color.split(",").map(Number); + return (r > 5 || g > 5 || b > 5) && (r < 250 || g < 250 || b < 250); + }); + + sortedColors = sortedColors.reduce( + (acc: [string, number][], [color, count]) => { + const similarColor = acc.find( + ([accColor]) => colorDistance(color, accColor) < 10, + ); + + if (!similarColor) { + acc.push([color, count]); + } else { + similarColor[1] += count; + } + + return acc; + }, + [], + ); + + const dominantColors = sortedColors.slice(0, 10).map(([color]) => color); + postMessage({ dominantColors }); +}; + +export {}; 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 e00068bd..56b8ca47 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/Card.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/Card.tsx @@ -1,6 +1,7 @@ import React from "react"; +import { useRouter } from "next/navigation"; -const MOCK_IMG_URL = +export const MOCK_IMG_URL = "https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1200,h_630/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/tsah7c9evnal289z5fig/IMG%20Worlds%20of%20Adventure%20Admission%20Ticket%20in%20Dubai%20-%20Klook.jpg"; export enum CardVariant { @@ -16,8 +17,15 @@ export interface CardProps { export const Card = (props: Readonly) => { const { variant, event } = props; + const router = useRouter(); + + const handleCardClick = () => { + console.log("clicked"); + router.push(`/events/${event}`); + }; + return ( -
+
{variant === CardVariant.Big && } {variant === CardVariant.Tile && } {variant === CardVariant.List && } @@ -27,8 +35,12 @@ export const Card = (props: Readonly) => { const CardBig = ({ event }: { event: string }) => { return ( -
- +
+

#abcd

@@ -41,10 +53,16 @@ const CardBig = ({ event }: { event: string }) => {
- + e.stopPropagation()} + className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]" + > + - + e.stopPropagation()} + className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]" + > ?
@@ -54,7 +72,7 @@ const CardBig = ({ event }: { event: string }) => { const CardTile = ({ event }: { event: string }) => { return ( -
+
{
- + e.stopPropagation()} + className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]" + > + - + e.stopPropagation()} + className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-1 text-sm font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]" + > ?
@@ -85,7 +109,7 @@ const CardTile = ({ event }: { event: string }) => { const CardList = ({ event }: { event: string }) => { return ( -
+
@@ -103,10 +127,16 @@ const CardList = ({ event }: { event: string }) => {

- + e.stopPropagation()} + className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-green-500 duration-300 hover:bg-[#0f0f0f]" + > + - + e.stopPropagation()} + className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#0f0f0f80] p-2 font-semibold text-blue-400 duration-300 hover:bg-[#0f0f0f]" + > ?
diff --git a/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx new file mode 100644 index 00000000..f10838a2 --- /dev/null +++ b/Client/reasn-client/packages/ui/src/components/shared/Comment.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { CommentDto, CommentDtoMapper } from "@reasn/common/models/CommentDto"; + +interface CommentProps { + comment: CommentDto; +} + +export const Comment = () => { + 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, + }); + + return ( +
+

{comment.Content}

+
+
+ avatar +
+

username

+

+ 13 czerwca 2024r. 12:25 +

+
+
+ ); +}; diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx index b24da98b..31ca0eb6 100644 --- a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx +++ b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx @@ -6,17 +6,20 @@ import React from "react"; interface ButtonProps { text: string; className?: string; + background?: string; onClick: () => void; } export const ButtonBase = (props: ButtonProps) => { - const { text, className, onClick } = props; + const { text, className, background, onClick } = props; return (