fix(panelCard): rework valuePanelCard and accept ReactNode for PanelC…

…ard's badge
napse-invest · Oct 21, 2023 · fb4383b · fb4383b
1 parent 9d48244
commit fb4383b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 43 deletions.
diff --git a/desktop-app/renderer/components/custom/panel/panelCard.tsx b/desktop-app/renderer/components/custom/panel/panelCard.tsx
@@ -22,7 +22,7 @@ interface CardComponentProps {
   children: React.ReactNode
   className?: string
   title?: ReactNode
-  badge?: string
+  badge?: ReactNode
   description?: string
   descriptionClassName?: string
   tooltip?: string
@@ -38,7 +38,6 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
       title,
       badge,
       description,
-      descriptionClassName,
       cardType,
       onClick,
       ...props
@@ -59,11 +58,14 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
         {(title || badge) && (
           <CardHeader className="flex flex-row items-end justify-between px-6">
             <CardTitle className="px-1 text-sm font-normal">{title}</CardTitle>
-            {badge && (
-              <Badge className="hover:bg-foreground text-xs italic">
-                {badge}
-              </Badge>
-            )}
+            {badge &&
+              (typeof badge === 'string' ? (
+                <Badge className="hover:bg-foreground text-xs italic">
+                  {badge}
+                </Badge>
+              ) : (
+                <React.Fragment>{badge}</React.Fragment>
+              ))}
           </CardHeader>
         )}
         <CardContent
@@ -73,11 +75,7 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
           }
         >
           {children}
-          {description && (
-            <CardDescription className={descriptionClassName}>
-              {description}
-            </CardDescription>
-          )}
+          {description && <CardDescription>{description}</CardDescription>}
         </CardContent>
       </Card>
     )
@@ -91,17 +89,15 @@ export default function PanelCard({
   title = '',
   badge = '',
   description = '',
-  descriptionClassName = '',
   cardType = 'button',
   tooltip = '',
   onClick = () => {}
 }: {
   children: ReactNode
   className?: string
   title?: ReactNode
-  badge?: string
+  badge?: ReactNode
   description?: string
-  descriptionClassName?: string
   cardType?: CardType
   tooltip?: ReactNode
   onClick?: () => void
@@ -116,7 +112,6 @@ export default function PanelCard({
             badge={badge}
             onClick={onClick}
             description={description}
-            descriptionClassName={descriptionClassName}
             cardType={cardType}
           >
             {children}
@@ -132,7 +127,6 @@ export default function PanelCard({
       badge={badge}
       onClick={onClick}
       description={description}
-      descriptionClassName={descriptionClassName}
       cardType={cardType}
     >
       {children}

diff --git a/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx b/desktop-app/renderer/components/custom/panel/valuePanelCard.tsx
@@ -1,54 +1,76 @@
-import PanelCard from '@/components/custom/panel/panelCard'
-import React from 'react'
+import PanelCard, { CardType } from '@/components/custom/panel/panelCard'
+import { BadgeDelta } from '@tremor/react'
+import { ReactNode } from 'react'
 
-function changeValueColor(value: number): string {
-  if (value > 0) {
-    return 'text-green-600'
-  } else if (value < 0) {
-    return 'text-red-500'
-  } else {
-    return 'text-muted-foreground'
+function getDeltaType({ delta }: { delta: number }): string {
+  // switch case on delta if delta is not defined
+  if (delta >= 5) {
+    return 'increase'
   }
-}
-
-function formatChangeValue(delta: number): string {
-  return `${delta >= 0 ? '+' : ''}${Intl.NumberFormat('us-US', {
-    maximumSignificantDigits: 3
-  }).format(delta)}%`
+  if (delta > 0 && delta < 5) {
+    return 'moderateIncrease'
+  }
+  if (delta === 0) {
+    return 'unchanged'
+  }
+  if (delta < 0 && delta > -5) {
+    return 'moderateDecrease'
+  }
+  return 'decrease'
 }
 
 function formatCurrencyValue(value: number): string {
-  return Intl.NumberFormat('us-US', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(value)
+  return `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`
 }
 
 function ValuePanelCard({
   title = '',
-  badge = '',
   value = 0,
-  delta = 0,
+  delta = 2,
+  description = '',
+  cardType = 'button',
   tooltip = '',
   onClick = () => {}
 }: {
-  title: string | React.ReactNode
-  badge?: string
+  title?: ReactNode
   value: number
   delta?: number
+  description?: string
+  cardType?: CardType
   tooltip?: string
   onClick?: () => void
 }): JSX.Element {
+  const badge = (
+    <BadgeDelta
+      className="rounded-tremor-full"
+      deltaType={getDeltaType({ delta })}
+      isIncreasePositive={true}
+      size="xs"
+    >
+      {delta >= 0
+        ? `+${delta.toFixed(delta % 1 == 0 ? 0 : 1)}`
+        : delta.toFixed(delta % 1 == 0 ? 0 : 1)}{' '}
+      %
+    </BadgeDelta>
+  )
   return (
     <PanelCard
+      className="h-32 w-80 min-w-fit"
       title={title}
       badge={badge}
-      description={formatChangeValue(delta)}
-      descriptionClassName={`text-sm ${changeValueColor(delta)}`}
+      description={description}
+      cardType={cardType}
       tooltip={tooltip}
       onClick={onClick}
     >
-      <div className="text-2xl font-bold">{formatCurrencyValue(value)}</div>
+      <div
+        className={
+          'text-center text-2xl font-bold' +
+          (cardType === 'disabledButton' ? ' cursor-not-allowed' : '')
+        }
+      >
+        {formatCurrencyValue(value)}
+      </div>
     </PanelCard>
   )
 }