floating

Author: alrocar

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

@@ -27,7 +27,7 @@ export function RootLayoutContent({ children, initialToken, initialOrgName }: Ro
       <FloatingNotification
         links={{
           github: 'https://github.com/tinybirdco/ai-analytics-template',
-          telegram: 'https://t.me/tinybirdco',
+          tinybird: 'https://tinybird.co/templates/ai-analytics-template',
         }}
       />
     </>

dashboard/ai-analytics/src/app/components/icons/index.tsx

@@ -28,11 +28,12 @@ export const SettingsIcon = () => (
 // Add this interface for the props
 interface IconProps {
   fill?: string;
+  className?: string;
 }
 
 // Update the FilterIcon to accept props
-export const FilterIcon = ({ fill = "white" }: IconProps) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const FilterIcon = ({ fill = "white", className }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
     <g clipPath="url(#clip0_5023_92)">
       <path fillRule="evenodd" clipRule="evenodd" d="M9.77098 3.12902C9.77098 2.71839 10.1287 2.66302 10.5824 2.5928C10.9967 2.52869 11.4909 2.4522 11.8658 2.0816C12.2449 1.70694 12.3191 1.14515 12.3826 0.664045C12.4508 0.148075 12.5067 -0.275089 12.9132 -0.275085C13.32 -0.275085 13.3757 0.146063 13.4439 0.661296C13.5075 1.14121 13.5818 1.70275 13.9607 2.0816C14.3372 2.45816 14.8341 2.53388 15.2494 2.59717C15.7006 2.66592 16.0555 2.72001 16.0555 3.12902C16.0555 3.53992 15.6762 3.59877 15.213 3.67063C14.7907 3.73616 14.2986 3.81251 13.9607 4.17644C13.6182 4.54528 13.5396 5.08731 13.4713 5.55858C13.3941 6.09101 13.33 6.53311 12.9132 6.53311C12.5073 6.53311 12.4522 6.1136 12.3848 5.59974C12.3217 5.11916 12.2477 4.55606 11.8658 4.17643C11.4871 3.80002 10.9904 3.72422 10.5756 3.66094C10.1249 3.59215 9.77098 3.53816 9.77098 3.12902ZM7.39286 6.98941L7.39284 6.98939C6.84145 6.43798 6.52567 5.76494 6.3344 5.12677C6.14271 5.76807 5.82511 6.44446 5.26828 6.99485C4.71274 7.54398 4.06687 7.8566 3.4709 8.0459C4.06738 8.23639 4.71352 8.55158 5.27095 9.10568C5.84815 9.67943 6.16852 10.3849 6.358 11.0461L6.36198 11.0316C6.5285 10.4272 6.81096 9.73387 7.35866 9.14399C7.8989 8.56215 8.56514 8.23938 9.17999 8.04818C8.58634 7.85697 7.94497 7.54151 7.39286 6.98941ZM6.33331 14.5489C5.55821 14.5489 5.45304 13.7479 5.32421 12.7667C5.20372 11.849 5.06255 10.7738 4.33331 10.0489C3.61025 9.33019 2.66169 9.18546 1.86977 9.06462C1.00902 8.93328 0.333313 8.83018 0.333313 8.04895C0.333313 7.26486 1.01641 7.15914 1.8827 7.02507C2.67368 6.90265 3.61739 6.7566 4.33331 6.04895C5.05708 5.33354 5.1988 4.26083 5.32017 3.34219C5.45033 2.35696 5.55708 1.54895 6.33331 1.54896C7.10993 1.54896 7.21639 2.35312 7.34665 3.33694C7.46797 4.25331 7.60993 5.32555 8.33331 6.04896C9.05233 6.76797 10.0011 6.91256 10.7942 7.03341C11.6556 7.16469 12.3333 7.26796 12.3333 8.04895C12.3333 8.83354 11.6091 8.94591 10.7246 9.08314C9.91817 9.20826 8.97853 9.35405 8.33331 10.049C7.67939 10.7532 7.52932 11.7882 7.39883 12.6881C7.25142 13.7047 7.12901 14.5489 6.33331 14.5489ZM11.2838 11.2622C11.3274 10.9322 11.3632 10.6615 11.6232 10.6615C11.8834 10.6615 11.9191 10.9309 11.9627 11.2605C11.975 11.3536 11.988 11.4516 12.0068 11.5496C12.0367 11.7047 12.0812 11.86 12.1613 11.9968C12.1974 12.0586 12.2407 12.1165 12.2932 12.169C12.3438 12.2196 12.3978 12.2617 12.454 12.297C12.5536 12.3596 12.6602 12.401 12.767 12.4305C12.8867 12.4636 13.0067 12.4819 13.1176 12.4988L13.1176 12.4988C13.4062 12.5427 13.6332 12.5773 13.6332 12.839C13.6332 13.1018 13.3906 13.1394 13.0943 13.1854L13.0943 13.1854C12.9897 13.2016 12.8785 13.2189 12.7689 13.2474C12.6578 13.2764 12.5483 13.317 12.4492 13.3798C12.3934 13.4152 12.3409 13.4576 12.2932 13.509C12.2418 13.5643 12.1997 13.6258 12.1648 13.6914C12.0918 13.8283 12.0503 13.9832 12.0211 14.1374C12.0047 14.2239 11.9922 14.3102 11.9802 14.393V14.393C11.9308 14.7336 11.8898 15.0164 11.6232 15.0164C11.3636 15.0164 11.3283 14.7481 11.2852 14.4194L11.2852 14.4193C11.2729 14.3257 11.2599 14.2271 11.241 14.1284C11.2124 13.98 11.1703 13.8313 11.0961 13.6988C11.0578 13.6305 11.0111 13.5664 10.9532 13.509C10.9017 13.4577 10.8468 13.4152 10.7897 13.3796C10.6901 13.3176 10.5838 13.2766 10.4775 13.2473C10.358 13.2143 10.2385 13.1961 10.128 13.1792C9.83963 13.1352 9.61327 13.1007 9.61327 12.839C9.61327 12.5763 9.8421 12.5409 10.1323 12.496L10.1323 12.496C10.2413 12.4791 10.3589 12.4609 10.4763 12.4288C10.5836 12.3995 10.6907 12.3586 10.7909 12.2966C10.8476 12.2614 10.9022 12.2195 10.9532 12.169C11.0061 12.1168 11.0497 12.0588 11.0859 11.997C11.1659 11.8606 11.2104 11.7052 11.2401 11.5497C11.2587 11.4523 11.2716 11.3549 11.2838 11.2622Z" fill={fill}/>
     </g>
@@ -48,4 +49,12 @@ export const SignInIcon = () => (
   <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M10.4306 8.19261C11.0842 7.67839 11.5613 6.97323 11.7954 6.17524C12.0296 5.37726 12.0092 4.52612 11.7371 3.74026C11.465 2.95439 10.9548 2.27288 10.2773 1.79052C9.59986 1.30816 8.78891 1.04895 7.95727 1.04895C7.12564 1.04895 6.31468 1.30816 5.63723 1.79052C4.95977 2.27288 4.4495 2.95439 4.17741 3.74026C3.90533 4.52612 3.88495 5.37726 4.11911 6.17524C4.35328 6.97323 4.83035 7.67839 5.48394 8.19261C4.36399 8.64131 3.3868 9.38551 2.65653 10.3459C1.92627 11.3063 1.47032 12.4468 1.33727 13.6459C1.32764 13.7335 1.33535 13.8221 1.35996 13.9067C1.38456 13.9912 1.42558 14.0701 1.48068 14.1388C1.59195 14.2776 1.7538 14.3665 1.93061 14.3859C2.10742 14.4054 2.28471 14.3538 2.42349 14.2425C2.56227 14.1313 2.65116 13.9694 2.67061 13.7926C2.817 12.4894 3.4384 11.2858 4.41609 10.4118C5.39377 9.5378 6.65921 9.05463 7.97061 9.05463C9.28201 9.05463 10.5474 9.5378 11.5251 10.4118C12.5028 11.2858 13.1242 12.4894 13.2706 13.7926C13.2887 13.9564 13.3669 14.1077 13.49 14.2173C13.6131 14.3269 13.7725 14.3869 13.9373 14.3859H14.0106C14.1854 14.3658 14.3451 14.2775 14.455 14.1401C14.5649 14.0028 14.616 13.8275 14.5973 13.6526C14.4636 12.4501 14.0052 11.3066 13.2712 10.3448C12.5372 9.3829 11.5552 8.63893 10.4306 8.19261ZM7.95727 7.71928C7.42986 7.71928 6.91428 7.56288 6.47575 7.26987C6.03722 6.97685 5.69543 6.56037 5.49359 6.0731C5.29176 5.58583 5.23895 5.04966 5.34185 4.53237C5.44474 4.01509 5.69872 3.53994 6.07166 3.167C6.4446 2.79406 6.91975 2.54008 7.43703 2.43719C7.95432 2.33429 8.49049 2.3871 8.97776 2.58894C9.46503 2.79077 9.88151 3.13256 10.1745 3.57109C10.4675 4.00962 10.6239 4.5252 10.6239 5.05261C10.6239 5.75986 10.343 6.43814 9.84289 6.93823C9.3428 7.43833 8.66452 7.71928 7.95727 7.71928Z" fill="currentColor"/>
   </svg>
-); 
+); 
+
+export const TinybirdIcon = ({ className }: { className?: string }) => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path opacity="0.6" d="M7.05159 10.414L11.2756 11.9144L4.08252 17.0005L7.05159 10.414Z" fill="currentColor"/>
+    <path d="M13.6022 3.45169L11.2812 11.9338L0.71582 8.11861L13.6022 3.45169Z" fill="currentColor"/>
+    <path opacity="0.6" d="M11.217 0.965287L15.8661 2.63556L9.47225 4.94605L11.217 0.965287Z" fill="white"/>
+  </svg>
+)

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

@@ -2,14 +2,15 @@
 
 import { useState, useRef, useEffect } from 'react'
 import { cn } from '@/lib/utils'
-import { Github, X, Send } from 'lucide-react'
+import { Github, X } from 'lucide-react'
+import { TinybirdIcon } from '@/app/components/icons'
 
 interface FloatingNotificationProps {
   className?: string
   title?: string
   links?: {
     github?: string
-    telegram?: string
+    tinybird?: string
     close?: () => void
   }
 }
@@ -85,21 +86,19 @@ export function FloatingNotification({
 
       {!isCollapsed && (
         <div className="flex items-center gap-0">
-          {links.telegram && (
+          {links.tinybird && (
             <a
-              href={links.telegram}
+              href={links.tinybird}
               target="_blank"
-              rel="noopener noreferrer"
               className="p-4 text-muted-foreground transition-colors hover:bg-transparent hover:text-[var(--accent)] active:text-white"
             >
-              <Send className="h-4 w-4" />
+              <TinybirdIcon className="h-4 w-4" />
             </a>
           )}
           {links.github && (
             <a
               href={links.github}
               target="_blank"
-              rel="noopener noreferrer"
               className="p-4 text-muted-foreground transition-colors hover:bg-transparent hover:text-[var(--accent)] active:text-white"
             >
               <Github className="h-4 w-4" />