add description to collection details

Author: 0xKurt

packages/grant-explorer/src/features/collections/CollectionDetails.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, LinkIcon } from "@heroicons/react/20/solid";
 import { ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { CollectionV1 } from "./collections";
+import { useCollections } from "./hooks/useCollections";
 
 type Props = {
   collection: CollectionV1;
@@ -17,17 +18,21 @@ export function CollectionDetails({
   projectsInView,
   onAddAllApplicationsToCart,
 }: Props) {
+  const collections = useCollections();
+
+  // filter collections by collection.href
+  const description = collections.data?.find(
+    (c) => c.cid && location.href.includes(c.cid)
+  )?.description;
+
   return (
     <div className="mt-16">
-      <h3 className="text-4xl font-medium mb-2">{`${
-        collection.name ?? defaultCollectionName
-      } (${projectsInView})`}</h3>
-      <div className="flex">
-        <div className="text-lg flex-1 whitespace-pre-wrap">
-          {collection.description}
-        </div>
-        <div className="w-96">
-          <div className="flex justify-end gap-2">
+      <div className="flex flex-col gap-12">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <h3 className="text-4xl font-medium">
+            {`${collection.name ?? defaultCollectionName} (${projectsInView})`}
+          </h3>
+          <div className="flex gap-2 mt-4 md:mt-0">
             <ShareButton url={location.href} />
             <AddToCartButton
               current={projectsInView}
@@ -36,6 +41,9 @@ export function CollectionDetails({
             />
           </div>
         </div>
+        <div className="text-lg flex-1 whitespace-pre-wrap">
+          {description ?? collection.description}
+        </div>
       </div>
     </div>
   );