From c6a855ec9bc50b4ce02a0f044e10c3d945bf9d58 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Mon, 5 Dec 2022 14:48:34 -0700
Subject: [PATCH] Update storage to link to cameras and share name styling with
 rest of ui

---
 web/src/routes/Storage.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/routes/Storage.jsx b/web/src/routes/Storage.jsx
index afb9cbe2c..213d70a4c 100644
--- a/web/src/routes/Storage.jsx
+++ b/web/src/routes/Storage.jsx
@@ -4,6 +4,7 @@ import Heading from '../components/Heading';
 import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
+import Link from '../components/Link';
 
 const emptyObject = Object.freeze({});
 
@@ -82,7 +83,9 @@ export default function Storage() {
           <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
             {Object.entries(storage).map(([name, camera]) => (
               <div key={name} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
-                <div className="text-lg flex justify-between p-4">{name}</div>
+                <div className="capitalize text-lg flex justify-between p-4">
+                  <Link href={`/cameras/${name}`}>{name.replaceAll('_', ' ')}</Link>
+                </div>
                 <div className="p-2">
                   <Table className="w-full">
                     <Thead>