feat: add requirement ui

guildxyz · Nov 23, 2024 · e6df6f7 · e6df6f7
1 parent bbf915d
commit e6df6f7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 20 deletions.
diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { env } from "@/lib/env";
 import type {
@@ -7,43 +8,78 @@ import type {
   Role,
   RoleGroup,
 } from "@/lib/types";
+import { Lock } from "@phosphor-icons/react/dist/ssr";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+import { Fragment } from "react";
 
 const RoleGroupPage = async ({
   params,
 }: DynamicRoute<{ roleGroupId: string; guildId: string }>) => {
   const { roleGroupId: roleGroupIdParam, guildId: guildIdParam } = await params;
-  const _guild = (await (
+  const guild = (await (
     await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
   ).json()) as Guild;
   const paginatedRoleGroup = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
-  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam);
-
+  const roleGroup = roleGroups.find((rg) => rg.urlName === roleGroupIdParam)!;
+  console.log(
+    `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
+  );
   const paginatedRole = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role/search?custumQuery=@guildId:{${guildIdParam}} @roleGroupId:{${roleGroup}}`,
+      `${env.NEXT_PUBLIC_API}/role/search?customQuery=@guildId:{${guild.id}}&pageSize=${Number.MAX_SAFE_INTEGER}`,
     )
   ).json()) as PaginatedResponse<Role>;
-  const roles = paginatedRole.items;
-  console.log(roles);
+  const roles = paginatedRole.items.filter((r) => r.groupId === roleGroup.id);
 
   return (
     <div className="my-4 space-y-4">
       {roles.map((role) => (
-        <Card className="p-4" key={role.id}>
-          <div className="flex items-center">
-            <img
-              className="size-12 rounded-full"
-              src={role.imageUrl}
-              alt="role avatar"
-            />
-            <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+        <Card className="flex border" key={role.id}>
+          <div className="w-1/2 border-r-2 p-6">
+            <div className="flex items-center gap-3">
+              <img
+                className="size-14 rounded-full border"
+                src={role.imageUrl}
+                alt="role avatar"
+              />
+              <h3 className="font-bold text-xl tracking-tight">{role.name}</h3>
+            </div>
+            <p className="mt-4 leading-relaxed">{role.description}</p>
+          </div>
+          <div className="w-1/2 bg-background p-6">
+            <div className="flex items-center justify-between">
+              <span className="font-bold text-foreground-secondary text-xs">
+                REQUIREMENTS
+              </span>
+              <Button size="sm">
+                <Lock />
+                Join Guild to collect rewards
+              </Button>
+            </div>
+            <ScrollArea className="mt-6 h-32">
+              <div className="flex flex-col gap-6">
+                {Array.from({ length: 16 }, (_, i) => (
+                  <Fragment key={i}>
+                    {i > 0 && <div className="h-px w-full bg-border" />}
+                    <div className="flex items-center gap-3">
+                      <div className="size-10 rounded-full bg-image" />
+                      <div className="">
+                        <h4 className="font-medium">Requirement name</h4>
+                        <p className="text-foreground-secondary text-sm">
+                          description, additional info
+                        </p>
+                      </div>
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            </ScrollArea>
           </div>
-          <p className="">{role.description}</p>
         </Card>
       ))}
     </div>

diff --git a/src/app/(dashboard)/[guildId]/layout.tsx b/src/app/(dashboard)/[guildId]/layout.tsx
@@ -21,7 +21,7 @@ const GuildPage = async ({
   ).json()) as Guild;
   const paginatedRoleGroup = (await (
     await fetch(
-      `${env.NEXT_PUBLIC_API}/role-group/search?custumQuery=@guildId:{${guildIdParam}}`,
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
     )
   ).json()) as PaginatedResponse<RoleGroup>;
   const roleGroups = paginatedRoleGroup.items;
@@ -46,7 +46,7 @@ const GuildPage = async ({
                 Join Guild
               </Button>
             </div>
-            <p className="text-balance text-lg leading-relaxed">
+            <p className="line-clamp-3 max-w-prose text-balance text-lg leading-relaxed">
               {guild.description}
             </p>
           </div>

diff --git a/src/app/(dashboard)/[guildId]/page.tsx b/src/app/(dashboard)/[guildId]/page.tsx
@@ -1,3 +1,30 @@
-const DefaultGuildPage = () => "default guild page";
+import { env } from "@/lib/env";
+import type {
+  DynamicRoute,
+  Guild,
+  PaginatedResponse,
+  RoleGroup,
+} from "@/lib/types";
+import { redirect } from "next/navigation";
+
+const DefaultGuildPage = async ({
+  params,
+}: DynamicRoute<{ guildId: string }>) => {
+  const { guildId: guildIdParam } = await params;
+  const guild = (await (
+    await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`)
+  ).json()) as Guild;
+  const paginatedRoleGroup = (await (
+    await fetch(
+      `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`,
+    )
+  ).json()) as PaginatedResponse<RoleGroup>;
+  const roleGroups = paginatedRoleGroup.items;
+  const roleGroup = roleGroups.at(0);
+  if (roleGroup) {
+    redirect(`/${guildIdParam}/${roleGroup.urlName}`);
+  }
+  return "default guild page";
+};
 
 export default DefaultGuildPage;
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -83,7 +83,7 @@ html {
   --image: var(--gray-700);
   --skeleton: var(--gray-300);
   --border: var(--gray-300);
-  
+
   --input-border: var(--gray-200);
   --input-border-accent: var(--gray-300);
   --input-border-invalid: var(--red-500);
@@ -179,3 +179,7 @@ html {
 body {
   @apply bg-background text-foreground font-sans min-h-screen antialiased selection:bg-foreground selection:text-background;
 }
+
+* {
+  border-color: var(--border);
+}