[RSN-70] - Implemented base user info page (for me and for user/usern…

…ame) (#57)

Client/reasn-client/apps/web/app/me/layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const LoginLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex min-h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default LoginLayout;

Client/reasn-client/apps/web/app/me/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { SharedUserPage } from "@reasn/ui/src/components/web";
+
+const MePage = () => {
+  return <SharedUserPage username="memememe" />;
+};
+
+export default MePage;

Client/reasn-client/apps/web/app/user/[username]/layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const UserLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex min-h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default UserLayout;

Client/reasn-client/apps/web/app/user/[username]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { SharedUserPage } from "@reasn/ui/src/components/web";
+import React from "react";
+
+const UserPage = ({ params }: { params: { username: string } }) => {
+  const { username } = params;
+  return <SharedUserPage username={username} />;
+};
+
+export default UserPage;

Client/reasn-client/packages/ui/src/components/shared/Interest.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+
+interface InterestProps {
+  text: string;
+  onDelete: () => void;
+}
+
+export const Interest = (props: InterestProps) => {
+  const { text, onDelete } = props;
+
+  return (
+    <div className="flex flex-row items-center gap-3 rounded-xl bg-[#232326] px-4 py-2">
+      <p>{text}</p>
+      <button onClick={onDelete} className="text-[#ccc]">
+        x
+      </button>
+    </div>
+  );
+};

Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx

@@ -1,16 +1,23 @@
+"use client";
+
+import clsx from "clsx";
 import React from "react";
 
 interface ButtonProps {
   text: string;
+  className?: string;
   onClick: () => void;
 }
 
 export const ButtonBase = (props: ButtonProps) => {
-  const { text, onClick } = props;
+  const { text, className, onClick } = props;
   return (
     <button
       onClick={onClick}
-      className="w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2"
+      className={clsx(
+        "w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2",
+        className,
+      )}
     >
       {text}
     </button>

Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 import React, { useState } from "react";
 

Client/reasn-client/packages/ui/src/components/shared/index.tsx

@@ -1,3 +1,4 @@
 export { Card, CardVariant } from "./Card";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
+export { Interest } from "./Interest";

Client/reasn-client/packages/ui/src/components/web/index.tsx

@@ -1,3 +1,4 @@
 export { HeroSection } from "./main/HeroSection";
-export { QuickFilters } from "./main/QuickFilters";
+export { QuickFilters, QuickFilterButton } from "./main/QuickFilters";
 export { CTASection } from "./main/CTASection";
+export { SharedUserPage } from "./user/SharedUserPage";

Client/reasn-client/packages/ui/src/components/web/main/QuickFilters.tsx

@@ -4,7 +4,7 @@ import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 import { ButtonBase } from "@reasn/ui/src/components/shared/form";
 
 interface QuickFiltersButtonProps {
-  title: string;
+  text: string;
   selected?: boolean;
   onClick: () => void;
 }
@@ -16,37 +16,37 @@ export const QuickFilters = () => {
     <div>
       <div className="flex w-full gap-10 overflow-x-clip bg-[#1E1F29] px-10 py-8">
         <QuickFilterButton
-          title="Dziś"
+          text="Dziś"
           onClick={() => setSelectedFilter("Today")}
           selected={selectedFilter === "Today"}
         />
         <QuickFilterButton
-          title="Jutro"
+          text="Jutro"
           onClick={() => setSelectedFilter("Tommorow")}
           selected={selectedFilter === "Tommorow"}
         />
         <QuickFilterButton
-          title="Rozpoczęte"
+          text="Rozpoczęte"
           onClick={() => setSelectedFilter("In Progress")}
           selected={selectedFilter === "In Progress"}
         />
         <QuickFilterButton
-          title="W tym tygodniu"
+          text="W tym tygodniu"
           onClick={() => setSelectedFilter("This Week")}
           selected={selectedFilter === "This Week"}
         />
         <QuickFilterButton
-          title="Wrocław"
+          text="Wrocław"
           onClick={() => setSelectedFilter("Wro")}
           selected={selectedFilter === "Wro"}
         />
         <QuickFilterButton
-          title="Kraków"
+          text="Kraków"
           onClick={() => setSelectedFilter("Krk")}
           selected={selectedFilter === "Krk"}
         />
         <QuickFilterButton
-          title="Zdalne"
+          text="Zdalne"
           onClick={() => setSelectedFilter("Remote")}
           selected={selectedFilter === "Remote"}
         />
@@ -77,7 +77,7 @@ export const QuickFilters = () => {
 };
 
 export const QuickFilterButton = (props: QuickFiltersButtonProps) => {
-  const { title, onClick, selected } = props;
+  const { text, onClick, selected } = props;
   return (
     <div className="min-w-36 rounded-2xl bg-gradient-to-r from-[#ff6363] to-[#1e35ff] p-px text-white">
       <button
@@ -88,7 +88,7 @@ export const QuickFilterButton = (props: QuickFiltersButtonProps) => {
           { "bg-[#1E1F29] hover:bg-[#2E2F3E]": !selected },
         )}
       >
-        {title}
+        {text}
       </button>
     </div>
   );

Client/reasn-client/packages/ui/src/components/web/user/SharedUserPage.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import { ButtonBase } from "../../shared/form";
+import { Card, CardVariant, Interest } from "../../shared";
+import { QuickFilterButton } from "../main/QuickFilters";
+
+interface SharedUserPageProps {
+  username: string;
+}
+
+export const SharedUserPage = (props: SharedUserPageProps) => {
+  const { username } = props;
+  const isMePage = username === "memememe";
+
+  return (
+    <div className="relative flex w-full flex-col gap-10">
+      <div className="flex h-fit items-center gap-10">
+        <div className="relative rounded-full bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-1">
+          <img
+            src="https://avatars.githubusercontent.com/u/63869461?v=4"
+            alt="avatar"
+            className="relative z-10 h-32 w-32 rounded-full"
+          />
+          <div className="absolute right-[-150%] top-[-175%] z-0 h-[400%] w-[400%] rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+        </div>
+        <div className="flex flex-col gap-1">
+          {isMePage ? (
+            <h1 className="relative z-10 text-4xl font-bold">
+              Imię Nazwisko{" "}
+              <span className="text-base text-[#ccc]">({username})</span>
+            </h1>
+          ) : (
+            <h1 className="relative z-10 text-4xl font-bold">{username}</h1>
+          )}
+          <p className="text-sm text-[#ccc]">Wrocław, Polska</p>
+        </div>
+        {isMePage && (
+          <ButtonBase
+            text="edytuj profil"
+            onClick={() => {}}
+            className="ml-auto"
+          />
+        )}
+      </div>
+      {isMePage ? <MeUserContent /> : <UserContent />}
+    </div>
+  );
+};
+
+const MeUserContent = () => {
+  const [selectedFilter, setSelectedFilter] = useState<string>("Wszystkie");
+  return (
+    <>
+      <div className="z-10 w-full rounded-xl bg-[#1E1F29] p-4">
+        <h3 className="mb-6 text-lg font-semibold">Trwające wydarzenia:</h3>
+        <div className="flex flex-col gap-2">
+          <Card variant={CardVariant.List} event={"a"} />
+          <Card variant={CardVariant.List} event={"a"} />
+        </div>
+      </div>
+      <div className="z-10 w-full rounded-xl bg-[#1E1F29] p-4">
+        <h3 className="mb-6 text-lg font-semibold">Nadchodzące wydarzenia:</h3>
+        <div className="flex w-full gap-2 pb-4">
+          <QuickFilterButton
+            text="Wszystkie"
+            onClick={() => setSelectedFilter("Wszystkie")}
+            selected={selectedFilter === "Wszystkie"}
+          />
+          <QuickFilterButton
+            text="Biorę udział"
+            onClick={() => setSelectedFilter("Biorę udział")}
+            selected={selectedFilter === "Biorę udział"}
+          />
+          <QuickFilterButton
+            text="Polubione"
+            onClick={() => setSelectedFilter("Polubione")}
+            selected={selectedFilter === "Polubione"}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Card variant={CardVariant.List} event={"a"} />
+          <Card variant={CardVariant.List} event={"a"} />
+        </div>
+      </div>
+      <div className="z-10 w-full rounded-xl bg-[#1E1F29] p-4">
+        <h3 className="mb-6 text-lg font-semibold">Twoje zainteresowania:</h3>
+        <div className="flex w-full flex-row justify-start gap-2">
+          <Interest text="piłka nożna" onDelete={() => {}} />
+          <Interest text="pływanie" onDelete={() => {}} />
+          <Interest text="gry komputerowe" onDelete={() => {}} />
+          <ButtonBase text="+" onClick={() => {}} className="ml-auto w-16" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+const UserContent = () => {
+  return (
+    <>
+      <div className="z-10 w-full rounded-xl bg-[#1E1F29] p-4">
+        <h3 className="mb-6 text-lg font-semibold">
+          Obecne wydarzenia tego użytkownika:
+        </h3>
+        <div className="flex flex-col gap-2">
+          <Card variant={CardVariant.List} event={"a"} />
+          <Card variant={CardVariant.List} event={"a"} />
+        </div>
+      </div>
+      <div className="z-10 w-full rounded-xl bg-[#1E1F29] p-4">
+        <h3 className="mb-6 text-lg font-semibold">
+          Polubione wydarzenia tego użytkownika:
+        </h3>
+        <div className="flex flex-col gap-2">
+          <Card variant={CardVariant.List} event={"a"} />
+          <Card variant={CardVariant.List} event={"a"} />
+        </div>
+      </div>
+    </>
+  );
+};