wip: restore sharing button on project landing

bitcashorg · Apr 17, 2024 · 0988b95 · 0988b95
1 parent 0e71780
commit 0988b95
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 79 deletions.
diff --git a/apps/webapp/components/routes/auction/auction-info.tsx b/apps/webapp/components/routes/auction/auction-info.tsx
@@ -1,90 +1,90 @@
 import { ProjectWithAuction } from '@/lib/projects'
+import { ProjectShare } from '../project/project-share'
+import React, { ReactNode, Fragment } from 'react'
+
+interface ItemProps {
+  label?: string
+  value: string | ReactNode
+  fields?: Array<{ label: string; value: string }>
+}
+
+function ListItem({ label, value }: ItemProps) {
+  if (!label && React.isValidElement(value)) {
+    // Directly return JSX elements
+    return (
+      <div className="flex justify-between w-full">
+        <b>{value}</b>
+      </div>
+    )
+  }
 
-export function AuctionInfo({ project }: { project: ProjectWithAuction }) {
   return (
-    <div className="grid items-center grid-cols-2 gap-5">
-      {fields.map((items, k) => (
-        <div
-          key={k}
-          className="flex flex-col w-full px-4 py-3 my-1 text-center rounded-sm bg-muted"
-        >
-          {items.map((item, ik) => (
-            <>
-              <ListItem key={ik} {...item} />
-              {ik < items.length - 1 ? (
-                <hr className="w-full my-2 border-accent/50" />
-              ) : null}
-            </>
-          ))}
-        </div>
-      ))}
+    <div className="flex justify-between w-full">
+      <h3 className="flex justify-between w-full">
+        <span className="opacity-70">{label}: </span>
+        <b>{typeof value === 'string' ? value : null}</b>
+      </h3>
     </div>
   )
 }
-const fields: Array<Array<ItemProps>> = [
-  [
-    {
-      label: 'Presale Period',
-      value: '5/15/24 - 6/30/24',
-      fields: []
-    },
-    {
-      label: 'Fundraising Goal',
-      value: '$150,000',
-      fields: []
-    },
-    {
-      label: 'Max Allocation',
-      value: '$5,000',
-      fields: []
-    }
-  ],
-  [
-    {
-      label: 'Token Sale Period',
-      value: '7/1/24 - 7/30/24',
-      fields: []
-    },
-    {
-      label: 'Fundraising Goal',
-      value: '250,0000',
-      fields: []
-    },
-    {
-      label: 'Max Allocation',
-      value: '$10,000',
-      fields: []
-    }
-  ],
-  [
-    {
-      label: 'Ticker',
-      value: 'BC',
-      fields: []
-    }
+
+export function AuctionInfo({ project }: { project: ProjectWithAuction }) {
+  const fields: Array<Array<ItemProps>> = [
+    [
+      { label: 'Presale Period', value: '5/15/24 - 6/30/24' },
+      { label: 'Fundraising Goal', value: '$150,000' },
+      { label: 'Max Allocation', value: '$5,000' }
+    ],
+    [
+      { label: 'Token Sale Period', value: '7/1/24 - 7/30/24' },
+      { label: 'Fundraising Goal', value: '$250,000' },
+      { label: 'Max Allocation', value: '$10,000' }
+    ],
+    [{ label: 'Ticker', value: 'BC' }],
+    [
+      // Passing `project` to `ProjectShare` if it is required as a prop
+      { value: <ProjectShare project={project} /> }
+    ]
   ]
-  // [
-  //   {
-  //     label: 'Base price',
-  //     value: '$99.99',
-  //     fields: []
-  //   }
-  // ]
-]
 
-function ListItem(props: ItemProps) {
   return (
-    <div className="flex justify-between w-full">
-      <h3 className="flex justify-between w-full">
-        <span className="opacity-70">{props.label}: </span>
-        <b>{props.value}</b>
-      </h3>
+    <div className="grid items-center grid-cols-2 gap-5">
+      {fields.map((items, k) => {
+        return React.isValidElement(items[0].value) ? (
+          items[0].value
+        ) : (
+          <div
+            key={k}
+            className="flex flex-col w-full px-4 py-3 my-1 text-center rounded-sm bg-muted"
+          >
+            {items.map((item, ik) => (
+              <Fragment key={ik}>
+                <ListItem {...item} />
+
+                {ik < items.length - 1 && (
+                  <hr className="w-full my-2 border-accent/50" />
+                )}
+              </Fragment>
+            ))}
+          </div>
+        )
+      })}
     </div>
   )
 }
 
-interface ItemProps {
-  label: string
-  value: string
-  fields?: Array<{ label: string; value: string }>
+{
+  /* <div
+          key={k}
+          className="flex flex-col w-full px-4 py-3 my-1 text-center rounded-sm bg-muted"
+        >
+          {items.map((item, ik) => (
+        
+                <ListItem key={ik} {...item} />
+          
+              {ik < items.length - 1 && (
+                <hr className="w-full my-2 border-accent/50" />
+        
+          )} )) }
+        </div> */
 }
diff --git a/apps/webapp/components/routes/project/project-share.tsx b/apps/webapp/components/routes/project/project-share.tsx
@@ -7,9 +7,8 @@ import { Project } from '@/lib/projects'
 
 export function ProjectShare({ project }: { project: Project }) {
   return (
-    <div className="flex flex-col w-full gap-3 bg-red-500 ">
-      <h2 className="mt-10 text-xl font-semibold">Media & Share</h2>
-      <div className="flex items-center gap-3 md:gap-6">
+    <div className="flex flex-col w-full gap-3">
+      <div className="flex items-center justify-end gap-3 md:gap-6">
         <Link
           href={`https://twitter.com/${project.twitterUsername}`}
           className={cn(