feat: make queue title as a link

felixmosh · Apr 23, 2023 · 945d35a · 945d35a
1 parent 9b07bb2
commit 945d35a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/ui/src/components/QueueCard/QueueCard.module.css b/packages/ui/src/components/QueueCard/QueueCard.module.css
@@ -2,3 +2,8 @@
   flex-direction: column;
   gap: 0.5rem;
 }
+
+.link {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/packages/ui/src/components/QueueCard/QueueCard.tsx b/packages/ui/src/components/QueueCard/QueueCard.tsx
@@ -1,5 +1,6 @@
 import { AppQueue } from '@bull-board/api/dist/typings/app';
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 import { Card } from '../Card/Card';
 import { QueueStats } from './QueueStats/QueueStats';
 import s from './QueueCard.module.css';
@@ -10,7 +11,11 @@ interface IQueueCardProps {
 
 export const QueueCard = ({ queue }: IQueueCardProps) => (
   <Card className={s.queueCard}>
-    <div>{queue.name}</div>
+    <div>
+      <NavLink to={`/queue/${encodeURIComponent(queue.name)}`} className={s.link}>
+        {queue.name}
+      </NavLink>
+    </div>
     <QueueStats queue={queue} />
   </Card>
 );