feat(application-review): added card and updated review page

privacy-scaling-explorations · Jan 9, 2025 · 2f94cef · 2f94cef
1 parent ece0f19
commit 2f94cef
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/interface/src/features/applications/components/ApplicationItem.tsx b/packages/interface/src/features/applications/components/ApplicationItem.tsx
@@ -32,7 +32,11 @@ export const ApplicationItem = ({
 
   const form = useFormContext<TApplicationsToApprove>();
 
-  const { fundingSources = [], profileImageUrl } = metadata.data ?? {};
+  const { profileImageUrl } = metadata.data ?? {};
+  const bio =
+    metadata.data?.bio && metadata.data.bio.length > 140
+      ? `${metadata.data.bio.substring(0, 140)}...`
+      : metadata.data?.bio;
 
   useEffect(() => {
     if (isApproved) {
@@ -60,7 +64,7 @@ export const ApplicationItem = ({
             </Skeleton>
 
             <div className="text-sm text-gray-400">
-              <div>{fundingSources.length} funding sources</div>
+              <div>{bio}</div>
             </div>
           </div>
         </div>

diff --git a/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx b/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx
@@ -3,8 +3,12 @@ import { useMemo, type ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
 import { Heading } from "~/components/ui/Heading";
+import { Skeleton } from "~/components/ui/Skeleton";
 import { Tag } from "~/components/ui/Tag";
 import { impactCategories } from "~/config";
+import { ImpactCategories } from "~/features/projects/components/ImpactCategories";
+import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
+import { ProjectBanner } from "~/features/projects/components/ProjectBanner";
 
 import type { Application } from "../types";
 
@@ -122,6 +126,34 @@ export const ReviewApplicationDetails = (): JSX.Element => {
           title="Funding sources"
         />
       </div>
+
+      <b className="text-lg">Project Preview Card</b>
+
+      <p className="text-sm">This is how your project will look in the dashboard:</p>
+
+      <div className="mb-2 grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+        <article className="dark:bg-lightBlack group w-96 rounded-xl bg-white pb-6 shadow-lg">
+          <div className="">
+            <ProjectBanner url={application.bannerImageUrl} />
+
+            <ProjectAvatar className="-mt-8 ml-4" rounded="full" url={application.profileImageUrl} />
+          </div>
+
+          <div className="p-4 pt-2">
+            <Heading as="h3" className="truncate dark:text-white" size="lg">
+              <Skeleton>{application.name}</Skeleton>
+            </Heading>
+
+            <div className="line-clamp-2 h-10 text-sm text-gray-400">
+              <Skeleton className="w-full">{application.bio}</Skeleton>
+            </div>
+
+            <Skeleton className="w-[100px]">
+              <ImpactCategories tags={application.impactCategory} />
+            </Skeleton>
+          </div>
+        </article>
+      </div>
     </div>
   );
 };