feat-reso-171:resource page

src/pages/ResourcePage/index.ts

@@ -0,0 +1,3 @@
+import ResourcePage from "./ui/ResourcePage";
+
+export { ResourcePage };

src/pages/ResourcePage/ui/ResourcePage.module.css

@@ -0,0 +1,54 @@
+.tagsContainer {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 0;
+  align-items: center;
+  background: rgba(250, 103, 115, 0.15);
+  backdrop-filter: blur(30);
+  border-radius: 30px;
+  box-shadow: 0px 6px 10px 0px #fe444440;
+  padding: 24px;
+  overflow: hidden;
+}
+
+.tagsContainer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(250, 103, 115, 0.2);
+  border-radius: inherit;
+  filter: blur(30px);
+  z-index: -1;
+  box-shadow: 0px 6px 10px 0px #fe444440;
+}
+
+.tags {
+  position: relative;
+  display: inline-block;
+  background-color: #fef7f8;
+  padding: 10px 16px;
+  min-width: 60px;
+  text-align: center;
+  border-radius: 100px;
+  z-index: 0;
+}
+
+.tags::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 55, 127, 1) 0%,
+    rgba(255, 212, 130, 1) 85%
+  );
+  mask:
+    linear-gradient(90deg, #fff 0%, #fff 100%) content-box,
+    linear-gradient(90deg, #fff 0%, #fff 100%);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  z-index: -1;
+}

src/pages/ResourcePage/ui/ResourcePage.tsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from "react";
+import { useUser } from "../../../shared/lib/customHooks/useUser";
+import type { UserRole } from "../../../app/types/global";
+import style from "./ResourcePage.module.css";
+import Navbar from "../../../shared/ui/Navbar/Navbar";
+import Footer from "../../../shared/ui/Footer/Footer";
+
+type Audience = "public" | "mentor" | "member";
+
+type Resource = {
+  id: string;
+  title: string;
+  type: string;
+  audience: Audience[];
+  description: string;
+  tags: string[] | null;
+};
+
+export default function ResourcePage() {
+  const userIdFromLocalStorage = localStorage.getItem("userId")
+    ? Number(localStorage.getItem("userId"))
+    : null;
+  const { user } = useUser(userIdFromLocalStorage);
+  const [resource, setResource] = useState<Resource | null>(null);
+
+  useEffect(() => {
+    // TODO: fetch resource from API
+    const fetchedResource: Resource = {
+      id: crypto.randomUUID(),
+      title: "Test resource",
+      type: "post",
+      audience: ["mentor"],
+      description:
+        "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
+      tags: ["react", "javascript"],
+    };
+
+    setResource(fetchedResource);
+  }, []);
+
+  const hasAccess = () => {
+    if (!resource) return false;
+
+    if (resource.audience.includes("public")) {
+      return true;
+    }
+
+    if (!user) {
+      return false;
+    }
+
+    const userRoles = user.roles.map((r) => r.role_name);
+    if (userRoles.includes("admin")) return true;
+
+    return resource.audience.some((requiredRole) => {
+      return userRoles.includes(requiredRole as UserRole);
+    });
+  };
+
+  if (!resource) {
+    return <div>Resource loading</div>;
+  }
+
+  if (!hasAccess()) {
+    return (
+      <div>
+        <p>You don't have access to view this page</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-[1200px] px-5 sm:px-10 mx-auto">
+      <Navbar />
+      <div className="mt-10">
+        <h2 className="text-3xl md:text-4xl font-bold">{resource?.title}</h2>
+      </div>
+
+      <div className="flex justify-between mt-5 md:mt-9 gap-5 flex-wrap md:flex-nowrap">
+        <div className="p-6 rounded-3xl w-full md:w-2/3 bg-white/40 shadow-[0_6px_10px_#ffa6ad66]">
+          <p className="text-lg md:text-xl font-montserrat">
+            {resource?.description}
+          </p>
+        </div>
+
+        <div
+          className={`${style.tagsContainer} justify-center md:justify-start w-full md:w-1/3 h-fit`}
+        >
+          {(resource.tags ?? []).map((tag) => (
+            <span
+              key={tag}
+              className={`${style.tags} text-sm md:text-base font-medium font-montserrat`}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}

src/shared/config/routeConfig/routeConfig.tsx

@@ -20,6 +20,7 @@ import TandC from "../../../pages/TandC";
 import { CreateApplicationMentorPage } from "../../../pages/CreateApplicationMentorPage";
 import { MentorUserProfilePage } from "../../../pages/MentorUserProfilePage";
 import { AuthDiscordCallbackPage } from "../../../pages/AuthDiscordCallbackPage";
+import { ResourcePage } from "../../../pages/ResourcePage";
 
 export enum AppRoutes {
   MAIN = "main",
@@ -42,6 +43,7 @@ export enum AppRoutes {
   CREATE_APPLICATION_MENTOR = "create_application_mentor",
   MENTOR_USER_PROFILE = "mentor_user_profile/:id",
   AUTH_DISCORD_CALLBACK = "auth/discord/callback",
+  RESOURCE = "resource",
 }
 
 export const RoutePath: Record<AppRoutes, string> = {
@@ -65,6 +67,7 @@ export const RoutePath: Record<AppRoutes, string> = {
   [AppRoutes.CREATE_APPLICATION_MENTOR]: "/create_application_mentor",
   [AppRoutes.MENTOR_USER_PROFILE]: "/mentor_user_profile/:id",
   [AppRoutes.AUTH_DISCORD_CALLBACK]: "/auth/discord/callback",
+  [AppRoutes.RESOURCE]: "/resource",
 };
 
 export const routeConfig: Record<AppRoutes, RouteProps> = {
@@ -148,4 +151,8 @@ export const routeConfig: Record<AppRoutes, RouteProps> = {
     path: RoutePath[AppRoutes.AUTH_DISCORD_CALLBACK],
     element: <AuthDiscordCallbackPage />,
   },
+  [AppRoutes.RESOURCE]: {
+    path: RoutePath.resource,
+    element: <ResourcePage />,
+  },
 };