floating

Author: alrocar

dashboard/ai-analytics/src/app/components/RootLayoutContent.tsx

@@ -5,6 +5,7 @@ import { useTinybirdToken } from '@/providers/TinybirdProvider';
 import { useModal } from '../context/ModalContext';
 import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut';
 import CostPredictionModal from './CostPredictionModal';
+import { FloatingNotification } from '@/components/ui/floating-notification';
 
 interface RootLayoutContentProps {
   children: ReactNode;
@@ -23,6 +24,12 @@ export function RootLayoutContent({ children, initialToken, initialOrgName }: Ro
     <>
       {children}
       <ModalController filters={{}} />
+      <FloatingNotification
+        links={{
+          github: 'https://github.com/tinybirdco/ai-analytics-template',
+          telegram: 'https://t.me/tinybirdco',
+        }}
+      />
     </>
   );
 }

dashboard/ai-analytics/src/app/globals.css

@@ -227,7 +227,7 @@ select::placeholder {
   opacity: 0.5;
 }
 
-.settings-button {
+.settings-button, .floating-notification-button {
   display: flex;
   flex-direction: row;
   align-items: center;

dashboard/ai-analytics/src/components/ui/floating-notification.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { cn } from '@/lib/utils'
+import { Github, X, Send } from 'lucide-react'
+
+interface FloatingNotificationProps {
+  className?: string
+  title?: string
+  links?: {
+    github?: string
+    telegram?: string
+    close?: () => void
+  }
+}
+
+export function FloatingNotification({
+  className,
+  title = 'Learn more about this template:',
+  links = {},
+}: FloatingNotificationProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [position, setPosition] = useState({ x: 20, y: 20 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect()
+      setDragOffset({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      })
+      setIsDragging(true)
+    }
+  }
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        setPosition({
+          x: e.clientX - dragOffset.x,
+          y: e.clientY - dragOffset.y,
+        })
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging, dragOffset])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'fixed flex items-center gap-6 bg-[#262626] shadow-lg border-l-[3px] border-l-[#27F795] pl-4',
+        isCollapsed ? 'w-auto' : 'w-[500px]',
+        className
+      )}
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        cursor: isDragging ? 'grabbing' : 'grab',
+      }}
+      onMouseDown={handleMouseDown}
+    >
+      <div className="flex items-center gap-6">
+        <div className="text-sm text-muted-foreground">ⓘ</div>
+        {!isCollapsed && (
+          <div className="text-sm text-muted-foreground !-ml-2">{title}</div>
+        )}
+      </div>
+
+      {!isCollapsed && (
+        <div className="flex items-center gap-2">
+          {links.telegram && (
+            <a
+              href={links.telegram}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-transparent hover:text-[var(--accent)] active:text-white"
+            >
+              <Send className="h-4 w-4" />
+            </a>
+          )}
+          {links.github && (
+            <a
+              href={links.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-transparent hover:text-[var(--accent)] active:text-white"
+            >
+              <Github className="h-4 w-4" />
+            </a>
+          )}
+          <button
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            className="floating-notification-button text-muted-foreground transition-colors hover:bg-[#27F795] hover:text-[#262626] active:bg-[#267A52] active:border-none active:text-[#FFFFFF]"
+          >
+            {isCollapsed ? '+' : <X className="h-4 w-4" />}
+          </button>
+        </div>
+      )}
+      {isCollapsed && (
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="floating-notification-button text-muted-foreground transition-colors hover:bg-[#27F795] hover:text-[#262626] active:bg-[#267A52] active:border-none active:text-[#FFFFFF]"
+        >
+          <div className="h-4 w-4 flex items-center justify-center">+</div>
+        </button>
+      )}
+    </div>
+  )
+}