clients/orders: add status badge

polarsource · Dec 17, 2024 · 670554d · 670554d
1 parent bb58644
commit 670554d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/[id]/ClientPage.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/sales/[id]/ClientPage.tsx
@@ -17,6 +17,7 @@ import Button from 'polarkit/components/ui/atoms/button'
 import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
 import React, { PropsWithChildren } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { Status } from 'polarkit/components/ui/atoms/Status'
 
 interface OrderProductItemProps {
   product: Product
@@ -99,10 +100,10 @@ const ClientPage: React.FC<ClientPageProps> = ({
             <span><FormattedDateTime dateStyle='long' datetime={order.created_at} /></span>
           </DetailRow>
           <DetailRow title="Billing Reason">
-            <span className='capitalize'>{order.billing_reason.split('_').join(' ')}</span>
+            <Status status={order.billing_reason.split('_').join(' ')} className='capitalize text-emerald-500 dark:bg-emerald-950 bg-emerald-100' />
           </DetailRow>
 
-          <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-200' />
+          <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-300' />
 
           <DetailRow title="Tax">
             <span>{formatCurrencyAndAmount(order.tax_amount)}</span>
@@ -115,7 +116,7 @@ const ClientPage: React.FC<ClientPageProps> = ({
           </DetailRow>
           {order.billing_address ? (
             <>
-              <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-200' />
+              <Separator className='h-[1px] my-4 dark:bg-polar-700 bg-gray-300' />
               <DetailRow title="Country">
                 <span>{order.billing_address?.country}</span>
               </DetailRow>

diff --git a/clients/packages/polarkit/package.json b/clients/packages/polarkit/package.json
@@ -24,6 +24,7 @@
     "./components/ui/atoms/switch": "./src/components/ui/atoms/Switch.tsx",
     "./components/ui/atoms/tabs": "./src/components/ui/atoms/Tabs.tsx",
     "./components/ui/atoms/textarea": "./src/components/ui/atoms/TextArea.tsx",
+    "./components/ui/atoms/Status": "./src/components/ui/atoms/Status.tsx",
     "./components/ui/calendar": "./src/components/ui/calendar.tsx",
     "./components/ui/command": "./src/components/ui/command.tsx",
     "./components/ui/alert-dialog": "./src/components/ui/alert-dialog.tsx",

diff --git a/clients/packages/polarkit/src/components/ui/atoms/Status.tsx b/clients/packages/polarkit/src/components/ui/atoms/Status.tsx
@@ -0,0 +1,9 @@
+import { twMerge } from "tailwind-merge"
+
+export const Status = ({ className, status }: { className: string, status: string }) => {
+  return (
+    <div className={twMerge("px-2 py-1 text-sm flex flex-row items-center justify-center rounded-md", className)}>
+      {status}
+    </div>
+  )
+}