update devices barlist

Author: alrocar

apps/web/package-lock.json

@@ -42,6 +42,7 @@
     "react": "^19.0.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
     "react-markdown": "^9.0.1",
     "recharts": "^2.15.0",
     "tailwind-merge": "^2.6.0",

apps/web/package.json

@@ -1,6 +1,8 @@
 'use client'
 
 import { BarList } from '@tinybirdco/charts'
+import { Laptop, Bot, SmartphoneIcon } from 'lucide-react'
+import { FaApple } from 'react-icons/fa'
 
 export function Auth0TopDevices(params: {
   client_id?: string
@@ -10,23 +12,36 @@ export function Auth0TopDevices(params: {
   date_from?: string
   date_to?: string
 }) {
+  const icons = {
+    'Desktop': Laptop,
+    'Mobile (Android)': SmartphoneIcon,
+    'Mobile (iOS)': FaApple,
+    'Bot': Bot
+  }
+
   return <BarList 
     endpoint={`${process.env.NEXT_PUBLIC_TINYBIRD_API_HOST}/v0/pipes/auth0_top_devices.json`}
     token={params.token ?? ''}
     index="device"
     categories={['request_count']}
-    colorPalette={['#000000']}
+    colorPalette={['#f2f2f2']}
     height="250px"
     params={params}
     indexConfig={{
         label: 'DEVICE',
-        renderBarContent: ({ label }) => (
-        <span className="font-normal text-white [text-shadow:2px_1px_0px_#000]">{label}</span>
-        )
+        renderBarContent: ({ label }) => {
+          const Icon = icons[label as keyof typeof icons] || Laptop
+          return (
+            <span className="font-bold text-black flex items-center gap-2">
+              <Icon size={16} className={label === 'Mobile (iOS)' ? 'stroke-[36] stroke-black fill-white' : ''} />
+              {label}
+            </span>
+          )
+        }
     }}
     categoryConfig={{
         request_count: {
-            label: <span>Requests</span>
+            label: <span className="font-normal normal-case text-xs">Requests</span>
         }
     }}
   />