chore: import deployable mai-bot source tree

dashboard/src/components/ui/card-with-background.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef, ElementRef } from 'react'
+import { forwardRef } from 'react'
+
+import { cn } from '@/lib/utils'
+
+import { BackgroundLayer } from '@/components/background-layer'
+import { Card } from '@/components/ui/card'
+
+import { useBackground } from '@/hooks/use-background'
+
+type CardWithBackgroundProps = ComponentPropsWithoutRef<typeof Card>
+
+export const CardWithBackground = forwardRef<
+  ElementRef<typeof Card>,
+  CardWithBackgroundProps
+>(({ className, children, ...props }, ref) => {
+  const { config: bg } = useBackground('card')
+
+  return (
+    <Card ref={ref} className={cn('relative isolate', className)} {...props}>
+      <BackgroundLayer config={bg} layerId="card" />
+      <div className="relative z-10">
+        {children}
+      </div>
+    </Card>
+  )
+})
+
+CardWithBackground.displayName = 'CardWithBackground'