EmptyAdvisor.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import { TextSearch } from 'lucide-react'
  2. import { Button } from 'ui'
  3. import type { AdvisorTab } from '@/state/advisor-state'
  4. interface EmptyAdvisorProps {
  5. activeTab: AdvisorTab
  6. hasFilters: boolean
  7. onClearFilters: () => void
  8. }
  9. export const EmptyAdvisor = ({ activeTab, hasFilters, onClearFilters }: EmptyAdvisorProps) => {
  10. const getHeading = () => {
  11. if (hasFilters) return 'No items found'
  12. switch (activeTab) {
  13. case 'security':
  14. return 'No security issues detected'
  15. case 'performance':
  16. return 'No performance issues detected'
  17. case 'messages':
  18. return 'No messages'
  19. default:
  20. return 'No issues detected'
  21. }
  22. }
  23. const getMessage = () => {
  24. if (hasFilters) return 'No advisor items match your current filters'
  25. switch (activeTab) {
  26. case 'security':
  27. return 'Congrats! There are no security issues detected for this project'
  28. case 'performance':
  29. return 'Congrats! There are no performance issues detected for this project'
  30. case 'messages':
  31. return 'Messages alert you of upcoming changes or potential issues with your project'
  32. default:
  33. return 'Congrats! There are no issues detected'
  34. }
  35. }
  36. return (
  37. <div className="h-full px-6 flex flex-col items-center justify-center w-full gap-y-2">
  38. <TextSearch className="text-foreground-muted" strokeWidth={1} />
  39. <div className="flex flex-col items-center gap-y-0.5 text-center">
  40. <h3 className="heading-default">{getHeading()}</h3>
  41. <p className="text-foreground-light text-sm text-balance">{getMessage()}</p>
  42. </div>
  43. {hasFilters && (
  44. <Button type="outline" onClick={onClearFilters}>
  45. Clear filters
  46. </Button>
  47. )}
  48. </div>
  49. )
  50. }