Merge pull request #18 from filecoin-project/bp/badge-component

[UXIT-3444] Badge component

Author: CharlyMartin

src/components/ui/badge-status.tsx

@@ -0,0 +1,51 @@
+import { CircleCheck, LoaderCircle } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../utils/cn.ts'
+import type { UploadProgress } from '../upload/upload-progress.tsx'
+
+type Status = UploadProgress['status'] | 'pinned'
+
+type BadgeStatusProps = VariantProps<typeof badgeVariants> & {
+  status: Status
+}
+
+const badgeVariants = cva('inline-flex items-center gap-1 pl-1.5 pr-2 py-0.5 rounded-full text-sm font-medium', {
+  variants: {
+    status: {
+      'in-progress': 'bg-badge-in-progress text-badge-in-progress-text border border-badge-in-progress-border',
+      completed: 'bg-badge-success text-brand-50 border border-badge-success-border',
+      pinned: 'bg-badge-success text-brand-50 border border-badge-success-border',
+      error: null,
+      pending: 'bg-zinc-800 border border-zinc-700 text-zinc-300',
+    },
+  },
+  defaultVariants: {
+    status: 'in-progress',
+  },
+})
+
+const statusIcons: Record<Status, React.ReactNode> = {
+  'in-progress': <LoaderCircle size={12} />,
+  completed: <CircleCheck size={12} />,
+  pinned: <CircleCheck size={12} />,
+  error: null,
+  pending: null,
+}
+
+const statusLabels: Record<Status, string | null> = {
+  'in-progress': 'In progress',
+  completed: 'Complete',
+  pinned: 'Pinned',
+  error: null,
+  pending: 'Pending',
+}
+
+function BadgeStatus({ status }: BadgeStatusProps) {
+  return (
+    <span className={cn(badgeVariants({ status }))}>
+      {statusIcons[status]} {statusLabels[status]}
+    </span>
+  )
+}
+
+export { BadgeStatus }

src/index.css

@@ -7,6 +7,13 @@
 
   --color-button-brand: #086dc5;
   --color-button-brand-disabled: #005280;
+
+  --color-badge-in-progress: #3b1400;
+  --color-badge-in-progress-text: #ff8c3b;
+  --color-badge-in-progress-border: #662100;
+
+  --color-badge-success: #001d3b;
+  --color-badge-success-border: #003669;
 }
 
 :root {